Adds Vue.js plugin to connect to ConfigCat
Currently only auto and manual fetching modes are functional
import Vue from 'vue';
import ConfigcatVue from 'configcat-vue';
const sdkKey = 'abc/123'; // SDK key from configcat
const mode = null; // optional, defaults to 'auto', can be 'manual' too
const opts = {}; // also optional, this is the regular configcat options object
Vue.use(ConfigcatVue, { SDK_KEY: sdkKey, POLLING_MODE: mode, options: opts });<template>
<div>
<div v-feature-flag="'myAwesomeFeatureFlag'">
if feature flag "myAwesomeFeatureFlag" is on, then this element will be visible
</div>
<div v-if="otherFlag">ogey</div>
<div v-if="myOGConfigCatFlag">rrat</div>
<button @click="forceCCRefresh">Force configcat refresh</button>
</div>
</template>
<script>
export default {
data() {
return {
myOGConfigCatFlag: false,
}
},
computed: {
/*
you can access the currently cached feature flag values
by calling this.$configcat.getCachedValue()
*/
otherFlag() {
this.$configcat.getCachedValue('myOtherFeatureFlag', false);
},
},
methods: {
/*
configcat client is accessible through the this.$configcat.client property
*/
forceCCRefresh() {
this.$configcat.client.forceRefreshAsync();
},
},
async mounted() {
/*
this.$configcat.getValue() passes the key and the default value
into the configcat client getValueAsync() method
*/
this.myOGConfigCatFlag = await this.$configcat.getValue('myOGConfigCatFlag', false)
},
};
</script>if the feature flag string passed into the directive is false then sets display: none on the element
assumes default value of false
| property | description |
|---|---|
client |
current instantiated configcat client |
user |
configcat user object |
getCachedValue(key, defaultValue) |
get currently cached feature flag |
async getValue(key, defaultValue) |
get feature flag, potentially refreshing the feature flags state from configcat |
setUser({ identifier, email, country, custom }) |
set the currently stored user object to send to configcat |
ConfigCat SDK for JavaScript provides easy integration for your application to ConfigCat.
Manage features and change your software configuration using ConfigCat feature flags , without the need to re-deploy code. A 10 minute trainable Dashboard allows even non-technical team members to manage features directly. Deploy anytime, release when confident. Target a specific group of users first with new ideas. Supports A/B/n testing and soft launching.
ConfigCat is a hosted feature flag service. Manage feature toggles across frontend, backend, mobile, desktop apps. Alternative to LaunchDarkly. Management app + feature flag SDKs.
via NPM package:
npm i configcat-jsimport * as configcat from "configcat-js";via CDN:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/configcat-js@latest/dist/configcat.min.js"></script>2. Go to the Dashboard to get your SDK Key:
var configCatClient = configcat.createClient("#YOUR-SDK-KEY#");We strongly recommend using the ConfigCat Client as a Singleton object in your application.
The Promise (async/await) way:
configCatClient.getValueAsync("isMyAwesomeFeatureEnabled", false)
.then((value) => {
if(value) {
do_the_new_thing();
} else {
do_the_old_thing();
}
});or the Callback way:
configCatClient.getValue("isMyAwesomeFeatureEnabled", false, (value) => {
if(value) {
do_the_new_thing();
} else {
do_the_old_thing();
}
});Using this feature, you will be able to get different setting values for different users in your application by passing a User Object to getValue() or getValueAsync().
Read more about Targeting here.
const userObject = { identifier : "#USER-IDENTIFIER#" };
configCatClient.getValueAsync("isMyAwesomeFeatureEnabled", false, userObject)
.then((value) => {
if(value) {
do_the_new_thing();
} else {
do_the_old_thing();
}
});The ConfigCat SDK supports 3 different polling mechanisms to acquire the setting values from ConfigCat. After latest setting values are downloaded, they are stored in the internal cache then all requests are served from there. Read more about Polling Modes and how to use them at ConfigCat Docs.
Contributions are welcome.
XMLHttpRequest module not defined/found:
Since the configcat-js SDK needs to download the feature flag and setting values from ConfigCat's servers via a HTTP GET request. The SDK uses XMLHttpRequest a built in object in all browsers. This way the package size is smaller instead of using a 3rd party library. The error above can appear in cases when the configcat-js SDK is used within a SSR (Server-Side Rendering) Universal application. In these cases we recommend using configcat-node configcat-node .