Vue LaunchDarkly

A simple wrapper around the js-client-sdk that provides observable feature flags, a ready state to ensure all feature flags are up to date, and other utilities.

Usage

Installation

$ npm install --save vue-ld

Main.js

import Vue from 'vue'
import { VueLd } from 'vue-ld';

Vue.use(VueLd, {
  clientSideId: 'YOUR_CLIENT_SIDE_ID',
  user: {
    key: '...',
    email: '...',
    name: '...',
  },
  options: {
    // Standard LaunchDarkly JavaScript SDK options
  }

Additional Plugin Options

key	description	default	type
readyBeforeIdentify	If set to false, the $ld.ready will only be true after identify has been called.	true	Boolean

Template

<template>
  <div v-if="$ld.ready && $ld.flags.yourFlag">
    // Render after feature flags are ready
  </div>
</template>

Identify

A wrapper around ldClient.identify to allow for

const options = {
  newUser: to,
};
const vueLdCallback = () => {
  // ...
};

export default {
  watch: {
    user(to) {
      this.$ld.identify(options, vueLdCallback);
    },
  },
};

Arguments

key	description	type
options	The standard ldclient.identify arguments.	object
vueLdCallback	A method called after the identify promise resolves; bound to the $ld context.	function

Redirect Mixin

Adds a temporary redirect watcher that will either redirect or destroy itself after the flags are ready.

import { ldRedirectMixin } from 'vue-ld';

export default {
  // ...
  mixins: [ldRedirectMixin('yourFlag', { name: 'home' })],
  // ...
};

Arguments

key	description	type
requiredFlag	If the given feature flag is false, the user will be redirected to the given route.	string
to	The path or object which vue router will push.	string or object

LDRouteGuard Component

Use this as an intermediary component on a route you need to guard with a feature flag; it is based on the ldRedirectMixin. All props are passed to the component rendered.

import { LDRouteGuard } from 'vue-ld';
import SecretComponent from '@/components/Secret';

const route = {
  path: '/secret',
  component: LDRouteGuard,
  props: {
    component: SecretComponent,
    requiredFeatureFlag: 'palantir',
    to: { name: 'away' },
  },
};

Props

key	description	type
component	The component to be rendered given the required feature flag is true.	vue component
requiredFlag	If the given feature flag is false, the user will be redirected to the given route.	string
to	The path or object which vue router will push.	string or object