launchdarkly-vue-client-sdk

import { createApp } from 'vue'; import App from './App.vue'; import { LDPlugin, LDContext, useLDFlag } from 'launchdarkly-vue-client-sdk'; // It's best practice to load your client-side ID from environment variables. // For Vite, use import.meta.env.VITE_LD_CLIENT_SIDE_ID // For other bundlers or Node.js, use process.env.LD_CLIENT_SIDE_ID const clientSideId = process.env.VITE_LD_CLIENT_SIDE_ID ?? 'YOUR_CLIENT_SIDE_ID'; // Replace with your actual Client-side ID const context: LDContext = { kind: 'user', key: 'example-user-key', name: 'Example User', // Custom attributes can be added here _meta: { privateAttributes: ['email'] }, // Example: Mark 'email' as private }; const app = createApp(App); // Initialize the LaunchDarkly Vue plugin app.use(LDPlugin, { clientSideId, context, // Optional: Add further options for the underlying JS SDK options: { streaming: true, // Enables real-time flag updates // logger: LaunchDarkly.basicLogger({ level: 'debug' }), // Uncomment for debug logs }, }); app.mount('#app'); // App.vue <script setup lang="ts"> import { ref, watchEffect } from 'vue'; import { useLDClient, useLDFlag } from 'launchdarkly-vue-client-sdk'; // Use useLDFlag for a specific flag, providing a fallback value const myFeatureEnabled = useLDFlag('my-boolean-feature', false); // Access the underlying LDClient for advanced operations like tracking events const ldClient = useLDClient(); const trackCustomEvent = () => { if (ldClient) { ldClient.track('button-clicked', { customData: 'from-vue' }); console.log('Custom event tracked!'); } }; </script> <template> <div> <h1>LaunchDarkly Vue SDK Demo</h1> <p>Is 'my-boolean-feature' enabled? <strong>{{ myFeatureEnabled ? 'Yes' : 'No' }}</strong></p> <button @click="trackCustomEvent">Track Button Click</button> <p v-if="myFeatureEnabled">This content is only visible if 'my-boolean-feature' is ON!</p> <p v-else>This content is visible if 'my-boolean-feature' is OFF!</p> </div> </template>