Skip to content

yusinto/ld-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ld-vue

npm version npm downloads npm npm

Integrate Launch darkly with Vue in seconds 🎉

Why this package?

  • Easy and fast to use. Two steps to get Launch Darkly feature flags into your Vue app.
  • Supports subscription out of the box. You get live changes on the client as you toggle features.
  • You automatically get camelCased keys as opposed to the default kebab-cased.

Installation

yarn add ld-vue

Quickstart

  1. Use the withFlagProvider mixin in your root App:

    App.vue
    <script>
    import { withFlagProvider } from 'ld-vue'
    
    export default {
      mixins: [withFlagProvider({ clientSideId: 'your-client-side-id' })],
    }
    </script>
  2. Use the withFlags mixin in your Vue component to get them via props:

    <template>
      <div>
        <!-- this.flags is injected by withFlags -->
        {{this.flags.devTestFlag ? 'Flag on' : 'Flag off'}}
      </div>
    </template>
    <script>
    import { withFlags } from 'ld-vue'
    
    export default {
      mixins: [withFlags],
    }
    </script>

That's it!

API

withFlagProvider({clientSideId, user, options})

This is a function which accepts a config object with the above properties. Only clientSideId is mandatory. Returns a mixin which a Vue instance can use like a normal mixin. Use this mixin in your root App.vue instance to initialise ld-vue.

Example usage with class components:

App.vue
<script>
import Component, { mixins } from 'vue-class-component'
import { withFlagProvider } from 'ld-vue'

@Component
export default class App extends mixins(withFlagProvider({clientSideId: 'your-client-side-id'})) {}
</script>

The user property is optional. You can initialise the sdk with a custom user by specifying one. This must be an object containing at least a "key" property. If you don't specify a user object, ld-vue will create a default one that looks like this:

const defaultUser = {
  key: uuid.v4(), // random guid
  ip: ip.address(),
  custom: {
    browser: userAgentParser.getResult().browser.name,
    device
  }
};

For more info on the user object, see here.

The options property is optional. It can be used to pass in extra options such as Bootstrapping.

For example:

withFlagProvider({
    clientSideId,
    options: {
      bootstrap: 'localStorage',
    },
});

withFlags

This is a mixin which injects all your flags to the specified component via props. Your flags will be available as camelCased properties under this.flags. For example with class components:

<template>
  <div>
    <!-- Look ma feature flags! -->
    {{this.flags.devTestFlag ? 'Flag on' : 'Flag off'}}
  </div>
</template>
<script>
import Component, { mixins } from 'vue-class-component'
import { withFlags } from 'ld-vue'

@Component
export default class Home extends mixins(withFlags) {}
</script>

ldClient

Internally ld-vue initialises the ldclient-js sdk and stores a reference to the resultant ldClient object in memory. You can use this object to access the official sdk methods directly. For example, you can do things like:

<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import {ldClient} from 'ld-vue';

@Component
export default class Home extends Vue {
  mounted() {
    ldClient.track('home page loaded');
  }
}
</script>

Example

Check the example for a standard vue cli app with feature flags. Remember to enter your client side sdk in the root app file and create a test flag called dev-test-flag before running the example!