Flagsmith Vue Client

A Vue client for Flagsmith.

Inspired from crishellco's vue-unleash.

Flagsmith Vue Client provides an integration for Vue and the Flagsmith open-source feature flag platform.

This plugin requires that your project use Vuex.

Install

yarn add -D flagsmith-vue-client
# or
npm i -D flagsmith-vue-client

import Vue from 'vue';
import VueFlagsmith from 'flagsmith-vue-client';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({});

/**
 * The <flagsmith-feature /> component is registered
 * globally during installation.
 */
Vue.use(VueFlagsmith, {
  // Required, environment id
  environmentId: 'my-vue-app-1',

  // Optional, Flagsmith API host (defaults to https://api.flagsmith.com)
  host: 'https://api.flagsmith.com',

  // Required
  store
});

Component Usage

<template>
  <flagsmith-feature name="BannerVisible">
    <add-user-form />
  </flagsmith-feature>
</template>

Store Usage

export default {
  mounted() {
    // Get all feature flags
    console.log(this.$store.state.flagsmith.featureFlags);

    // Get weather initial loading is occurring
    console.log(this.$store.state.flagsmith.loading);

    // Re-fetch data
    this.$store.dispatch('flagsmith/fetch');
  }
};

Scripts

yarn lint

yarn test

yarn build

TODO

1. Add featureFlags getter for store
2. Add functionality for if-else conditinal rendering (if flag is enabled render x, else render y)

How to Contribute

Pull Requests

1. Fork the repository
2. Create a new branch for each feature or improvement
3. Send a pull request from each feature branch to the develop branch

License

MIT