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

Unleash · Sep 26, 2024 · 2292e2f · 2292e2f
1 parent e20ef56
commit 2292e2f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 22 deletions.
diff --git a/frontend/src/component/onboarding/dialog/snippets/svelte.md b/frontend/src/component/onboarding/dialog/snippets/svelte.md
@@ -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>
+
+<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>
 
-<FlagProvider {config}>
-    <App />
-</FlagProvider>
+<section>
+    <p>
+        {$enabled ? 'Feature is enabled!' : 'Feature is disabled!'}
+    </p>
+</section>
 ```
diff --git a/frontend/src/component/onboarding/dialog/snippets/vue.md b/frontend/src/component/onboarding/dialog/snippets/vue.md
@@ -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',
-}
+<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>
 
-const app = createApp(App)
-app.use(unleashPlugin, { config })
-app.mount('#app')
+<template>
+  <div>
+    {{ enabled ? 'Feature is enabled!' : 'Feature is disabled!' }}
+  </div>
+</template>
 ```