vue-ld v0.4.0
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-apifor 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 watchLocal
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).