ld-vue
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
-
Use the
withFlagProvider
mixin in your root App:##### App.vue
<script>mixins:</script> -
Use the
withFlags
mixin in your Vue component to get them via props:<template><div><!-- thisflags is injected by withFlags -->thisflagsdevTestFlag ? 'Flag on' : 'Flag off'</div></template><script>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> @Component {}</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 // random guid ip: ip custom: browser: userAgentParserbrowsername 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:
;
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! --> thisflagsdevTestFlag ? 'Flag on' : 'Flag off' </div></template><script> @ComponentwithFlags {}</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>; @Component { ldClient; }</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!