If you've been launching darkly, gating your features behind flags, and controlling the release of those features with LaunchDarkly while building with Vue, you haven't had a natural way to tap into its native abilities for reactive rendering of feature changes live in your app without some wrapper.
That time is over and we're excited to share that now, thanks to the release of our new Vue SDK, it's never been easier to launch darkly with a Vue app.
Prerequisites
- Peer dependency of Vue 3.2.36 or higher as of the time of publishing.
- LaunchDarkly account and Client side ID.
- If you don't have a LaunchDarkly account, it's free to create one and it's easy to setup
- Getting your client side ID is a piece of cake, just head to your account settings page and pick theClient-side IDfor your environment.
Quick Start: Installation
npm install launchdarkly-vue-client-sdk
# yarn
yarn add launchdarkly-vue-client-sdk
# pnpm
pnpm install launchdarkly-vue-client-sdkℹ️ dotenv is not a dependency of the launchdarkly-vue-client-sdk but it is recommended dependency for the below code if you're not using a bundler (like Vite) which loads your environment variables into memory for you.
Setup: Vue integration
In your main.js or main.ts, where you import your App.vue
// main.ts || main.js file
import { createApp } from 'vue'
import App from './App.vue'
import { LDPlugin } from 'launchdarkly-vue-client-sdk'
// not required for a Vite bundled app
import { config } from 'dotenv'
config();
// if you're not using Vite
const clientSideID = process.env.CLIENT_ID;
// if you're using Vite and a .env file, you want to do this instead
const clientSideID = import.meta.env.VITE_CLIENT_ID;
const app = createApp(App)
if (clientSideID) {
app.use(LDPlugin, { clientSideID })
}
app.mount('#app')By including a Vue plugin with the SDK, integration with Vue's native features is easy peasy lemon squeezy. In this example I wrapped the use of the LaunchDarkly plugin so the app would start even if the client side ID isn't yet present, but the user interface will let you know if it's working or not.
Environment setup
Now create a .env file and add it to your .gitignore if this is a git repository.
Warning: The client ID isn't secret, it's okay to include in your client where anyone can see it, but it's a best practice to keep it out of code, so it's easier to change over time and by environment. We have followed that best practice here.
// .env file
// required if you're using Vite
VITE_CLIENT_ID = your client ID goes here!
// required only if you're NOT using Vite
CLIENT_ID = your client ID goes here!ℹ️ if you're using Vite as your build tool make sure you prefix your environment variable with VITE_ so that Vite knows it's okay to surface your environment variable to the client.
Warning: If your app was running, you may have to manually restart your app to pick up the environment changes.
Basic Vue App with Flags
<template>
<div>
<div v-if="isLaunchDarklyReady">
<h1>
LaunchDarkly is ready!!
</h1>
<h2>
{{featuredMessage}}
</h2>
</div>
<div v-else>
<h1>
Something went wrong with LaunchDarkly initialization
Check the console in the browser to see the error
</h1>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useLDReady, useLDFlag } from 'launchdarkly-vue-client-sdk';
let isLaunchDarklyReady = ref(false);
const defaultMessage = 'hello';
let featuredMessage = ref(defaultMessage);
try {
isLaunchDarklyReady = useLDReady();
featuredMessage = useLDFlag('featured-message', defaultMessage);
} catch (error) {
console.error('error checking LD Ready', error);
}
</script>Ready? Action?
We're using the v-if directive from Vue to conditionally render our message only if our reactive object isLaunchDarklyReady is truthy. We're using Vue's Composables pattern to track the state of the LaunchDarkly client.
(In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse *stateful logic*.)
Our composable, useLDReady returns a reactive object so Vue can observe and subscribe to state changes in that object powering the conditional rendering of our ready message.
Flag on the play
Additionally, we're using another composable included in the SDK, one you'll likely use a lot. Use useLDFlag whenever you need to react to state changes in a flag whether it's using visibility directives like v-if or using the value in a template as in the above example with our featuredMessage.
In this case, featured-message is a feature flag which returns a string so we can customize the message we display to the user.
We set the default value with the following:
// abridged code sample from above
const defaultMessage = 'hello';
// the initial reactive object at the template level
let featuredMessage = ref(defaultMessage);
try {
...
// reassigning the featuredMessage once we've initialized LaunchDarkly successfully
featuredMessage = useLDFlag('featured-message', defaultMessage);
// truncatedI defined the featuredMessage as a reassignable variable scoped for the SFC we're in so my reactive object would be visible to the whole template. Additionally, I put the useLDFlag call below the call to useLDReady so that if it throws then we'll never get to checking the flag and we'll just use the initialize reactive object instead.
Add this flag to your account and setup a message to display so you can see this in action!
If you're new to creating feature flags in LaunchDarkly, follow these instructions and name the flag featuredmessage, selecting String as the type for Flag variations, and be sure to check the SDKs using Clientside
ID. By default Variation 1 will be served when the feature is on, Variation 2 will be served when the feature is off.
Make it your own and define two variations so you can see the "off" value from your feature flag configuration and the "on" value too!
You should now see your feature flag variations in your app and as you change the configuration in LaunchDarkly, you'll see those changes almost instantaneously thanks to our Flag Delivery Network.
It's actually that easy
That's a wrap on the intro to our new Vue SDK!
If you're new to LaunchDarkly and you need some help getting started, you can be up and running in no time with this guide.
If you want a deeper dive into some of the details, check out our amazing docs for some deeper dives on other configuration options, deferring initialization, or options on how to control how flag values are updated.
Coming soon:
Deeper dive into using the Vue SDK and the various flag types to supercharge your Vue app development and release!
.webp)
