Introducing the LaunchDarkly Vue SDK

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 the Client-side ID for your environment.

Quick Start: Installation

ℹ️ 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

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.

ℹ️ 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

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:

I 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.