Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat(onboarding): Vue and Svelte snippets (#8250)

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-09-26 14:06:30 +02:00 committed by GitHub
parent e20ef56374
commit 2292e2f6ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/component/onboarding/dialog/snippets/svelte.md
View File

@ -5,18 +5,37 @@ npm install @unleash/proxy-client-svelte
2\. Initialize Unleash
```svelte
<script lang="ts">
import { FlagProvider } from '@unleash/proxy-client-svelte';
<script>
import { FlagProvider } from '@unleash/proxy-client-svelte';
const config = {
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-svelte'
};
refreshInterval: 5,
metricsInterval: 5,
};
</script>
<FlagProvider {config}>
<App />
</FlagProvider>
<div class="app">
<FlagProvider {config}>
<main>
<slot />
</main>
</FlagProvider>
</div>
```
3\. Check feature flag status
```svelte
<script lang="ts">
import { useFlag } from '@unleash/proxy-client-svelte';
const enabled = useFlag('<YOUR_FLAG>');
</script>
<section>
<p>
{$enabled ? 'Feature is enabled!' : 'Feature is disabled!'}
</p>
</section>
```

45
frontend/src/component/onboarding/dialog/snippets/vue.md
View File

@ -4,21 +4,36 @@ npm install @unleash/proxy-client-vue
```
2\. Initialize Unleash
```vue
<script setup lang="ts">
import { FlagProvider } from '@unleash/proxy-client-vue'
```js
import { createApp } from 'frontend/src/component/onboarding/dialog/snippets/vue'
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
// import the root component App from a single-file component.
import App from './App.vue'
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
appName: 'unleash-onboarding-vue',
refreshInterval: 5,
metricsInterval: 5,
}
</script>
const config = {
url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-vue',
}
const app = createApp(App)
app.use(unleashPlugin, { config })
app.mount('#app')
<template>
<FlagProvider :config="config">
<!-- <YourComponent /> -->
</FlagProvider>
</template>
```
3\. Check feature flag status
```vue
<script setup lang="ts">
import { useFlag } from '@unleash/proxy-client-vue'
const enabled = useFlag('<YOUR_FLAG>')
</script>
<template>
<div>
{{ enabled ? 'Feature is enabled!' : 'Feature is disabled!' }}
</div>
</template>
```