/vue-ld

Vue LaunchDarkly plugin and routing utilities

Primary LanguageJavaScriptMIT LicenseMIT

Vue LaunchDarkly

Mentioned in Awesome Vue.js Maintainability Test Coverage npm version Last Commit Licence Stars

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