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 2\. Initialize Unleash
```svelte ```svelte
<script lang="ts"> <script>
import { FlagProvider } from '@unleash/proxy-client-svelte'; import { FlagProvider } from '@unleash/proxy-client-svelte';
const config = { const config = {
url: '<YOUR_API_URL>', url: '<YOUR_API_URL>',
clientKey: '<YOUR_API_TOKEN>', clientKey: '<YOUR_API_TOKEN>',
refreshInterval: 15,
appName: 'unleash-onboarding-svelte' appName: 'unleash-onboarding-svelte'
}; refreshInterval: 5,
metricsInterval: 5,
};
</script> </script>
<FlagProvider {config}> <div class="app">
<App /> <FlagProvider {config}>
</FlagProvider> <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 2\. Initialize Unleash
```vue
<script setup lang="ts">
import { FlagProvider } from '@unleash/proxy-client-vue'
```js const config = {
import { createApp } from 'frontend/src/component/onboarding/dialog/snippets/vue' url: '<YOUR_API_URL>',
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue' clientKey: '<YOUR_API_TOKEN>',
// import the root component App from a single-file component. appName: 'unleash-onboarding-vue',
import App from './App.vue' refreshInterval: 5,
metricsInterval: 5,
}
</script>
const config = { <template>
url: '<YOUR_API_URL>', <FlagProvider :config="config">
clientKey: '<YOUR_API_TOKEN>', <!-- <YourComponent /> -->
refreshInterval: 15, </FlagProvider>
appName: 'unleash-onboarding-vue', </template>
} ```
const app = createApp(App) 3\. Check feature flag status
app.use(unleashPlugin, { config }) ```vue
app.mount('#app') <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>
``` ```