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