From 2292e2f6ca9d7659b248492ee447c269b346159a Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 26 Sep 2024 14:06:30 +0200
Subject: [PATCH] feat(onboarding): Vue and Svelte snippets (#8250)

---
 .../onboarding/dialog/snippets/svelte.md      | 35 +++++++++++----
 .../onboarding/dialog/snippets/vue.md         | 43 +++++++++++++------
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/onboarding/dialog/snippets/svelte.md b/frontend/src/component/onboarding/dialog/snippets/svelte.md
index 43b6b6ad58e1..edf27198190d 100644
--- 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
index 0a6c44954eca..87b5bee36bce 100644
--- 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>
 ```