Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yusinto/ld-vue

A library to integrate Launch Darkly with Vue
https://github.com/yusinto/ld-vue

darkly feature feature-flag feature-flags flags integration js launch launchdarkly ld ld-vue ldclient ldclient-js targeting toggle vue vue-components vue2 vuejs vuejs2

Last synced: 2 months ago
JSON representation

A library to integrate Launch Darkly with Vue

Awesome Lists containing this project

README 

        
# ld-vue



[![npm version](https://img.shields.io/npm/v/ld-vue.svg?style=flat-square)](https://www.npmjs.com/package/ld-vue) [![npm downloads](https://img.shields.io/npm/dm/ld-vue.svg?style=flat-square)](https://www.npmjs.com/package/ld-vue) [![npm](https://img.shields.io/npm/dt/ld-vue.svg?style=flat-square)](https://www.npmjs.com/package/ld-vue) [![npm](https://img.shields.io/npm/l/ld-vue.svg?style=flat-square)](https://www.npmjs.com/package/ld-vue)



> **Integrate Launch darkly with Vue in seconds** :tada:



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

    ```js

    

    import { withFlagProvider } from 'ld-vue'

    

    export default {

      mixins: [withFlagProvider({ clientSideId: 'your-client-side-id' })],

    }

    

    ```



2. Use the `withFlags` mixin in your Vue component to get them via props:



    ```js

    

      


        

        {{this.flags.devTestFlag ? 'Flag on' : 'Flag off'}}

      


    

    

    import { withFlags } from 'ld-vue'

    

    export default {

      mixins: [withFlags],

    }

    

    ```



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

```js



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'})) {}



```



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:



```js

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](http://docs.launchdarkly.com/docs/js-sdk-reference#section-users).



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

[Bootstrapping](https://github.com/launchdarkly/js-client#bootstrapping).



For example:



```javascript

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:



```js



  


    

    {{this.flags.devTestFlag ? 'Flag on' : 'Flag off'}}

  



import Component, { mixins } from 'vue-class-component'

import { withFlags } from 'ld-vue'



@Component

export default class Home extends mixins(withFlags) {}



```



### 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](https://github.com/launchdarkly/js-client) directly. 

For example, you can do things like:



```js



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');

  }

}



```



## Example

Check the [example](https://github.com/yusinto/ld-vue/tree/master/example) for a standard vue cli app with feature flags.

Remember to enter your client side sdk in the [root app file](https://github.com/yusinto/ld-vue/blob/master/example/src/App.vue)

and create a test flag called `dev-test-flag` before running the example!