dashhudson/vue-ld

Vue LaunchDarkly plugin and routing utilities

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 routing utilities. Compatabile with both Vue 2 and Vue 3 via vue-demi.

Usage

Installation

$ npm install --save vue-ld launchdarkly-js-client-sdk

• Requires @vue/composition-api for Vue 2 support.

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
flagsStub	If provided, the ldClient will not be initialized and $ld.flags will set to the provided stub; this can be helpful in e2e tests.	undefined	Object / Proxy

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

export default {
  methods: {
    vueLdCallback() {
      // ...
    },
  },
  watch: {
    user(to) {
      const options = {
        newUser: to,
      };
      this.$ld.identify(options, this.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 which vue router will push. Functions passed are expected to resolve to a valid path.	string, object, or function
invertFlag	If set to true the the inverse of the requiredFlag's value will be used.	boolean

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.

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

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

Props

key	description	type
component	The component to be rendered given the required feature flag is true.	vue component
componentProps	The props object to hand to the component above.	object
requiredFlag	If the given feature flag is false, the user will be redirected to the given route.	string
to	The path which vue router will push. Functions passed are expected to resolve to a valid path.	string, object, or function
invertFlag	If set to true the the inverse of the requiredFlag's value will be used.	boolean

Development

After cloning the repo to your machine:

$ npm install
$ npm run watch

Local

If you wish to test out your changes in another project locally, you can install with npm install --save <your_local_path_to_/vue-ld>. Your vue app will detect changes so long as vue-ld is being watched (by running npm run watch).