LaunchDarkly Vue Client SDK

2.5.0 · active · verified Tue Apr 21

The LaunchDarkly Vue Client SDK provides seamless integration of feature flags into Vue.js applications, specifically supporting Vue 3.2 and newer versions. As of `2.5.0`, it offers a robust solution for dynamically managing features, building upon the core LaunchDarkly JavaScript SDK. Key differentiators include first-class support for Vue's Composition API through reactive hooks (like `useFlags` and `useLDClient`) and a dedicated Vue plugin for easy initialization. The SDK sees frequent releases, typically every 1-3 months, ensuring compatibility with the latest Vue and LaunchDarkly platform features. It is designed for client-side environments, requiring a client-side ID for authentication and specific flag configurations to ensure availability.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to initialize the LaunchDarkly Vue SDK using `LDPlugin`, configure an `LDContext`, and then consume a feature flag reactively within a Vue component using the `useLDFlag` composable. It also shows how to access the underlying `LDClient` for custom event tracking.

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>

view raw JSON →