flagsmith-vue-client
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
- Add featureFlags getter for store
- Add functionality for if-else conditinal rendering (if flag is enabled render x, else render y)
How to Contribute
Pull Requests
- Fork the repository
- Create a new branch for each feature or improvement
- Send a pull request from each feature branch to the develop branch
License
Dependencies
@babel/core: ^7.5.5@babel/plugin-proposal-class-properties: ^7.5.5@babel/plugin-transform-runtime: ^7.5.5@babel/preset-env: ^7.5.5@commitlint/cli: ^12.1.4@form8ion/commitlint-config: ^1.0.19@vue/test-utils: ^1.0.0-beta.30axios: ^0.19.0babel-core: ^7.0.0-bridge.0babel-eslint: ^10.0.3babel-jest: ^24.9.0babel-loader: ^8.0.6babel-preset-env: ^1.7.0babel-preset-vue: ^2.0.2cross-env: ^7.0.2cz-conventional-changelog: 3.3.0eslint: ^6.7.2eslint-config-prettier: ^6.7.0eslint-loader: ^3.0.3eslint-plugin-prettier: ^3.1.2eslint-plugin-vue: ^6.0.1husky: ^7.0.0jest: ^24.9.0npm-run-all: ^4.1.5poi: ^12.7.1prettier: ^1.19.1regenerator-runtime: ^0.13.3semantic-release: ^17.4.4uglifyjs-webpack-plugin: ^2.2.0vue: ^2.6.11vue-html-loader: ^1.2.4vue-jest: ^3.0.5vue-loader: ^15.7.1vue-style-loader: ^4.1.2vue-template-compiler: ^2.6.10vuex: ^3.1.2webpack: ^4.39.1webpack-cli: ^3.3.6