
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
vue-feature-flipping
Advanced tools
:information_source: Vue 3 supported!
Vue.js plugin providing a set of components used to introduce "feature flipping" in your project.
The build of the application packaged into bundle the configuration file (config/*.env.js
constants) and environment variables (process.env.*
usages).
So to modify any value, you have to re-build the application.
When you have to enable or disable a feature, the update must be easy and instantaneous.
This plugin solve this problem.
All feature flags (list of keys of type string
) are stored into plugin.
This list is dynamically initialized at startup (by setEnabledFeatures()
function).
Components use this list to define if action can be done (DOM can be shown, route is accessible, ...).
Install NPM dependency:
npm install --save vue-feature-flipping
Register all Vue.js components (directive, guard, ...) calling .use()
:
import Vue from 'vue'
import FeatureFlipping from 'vue-feature-flipping'
createApp(...)
.use(FeatureFlipping)
.mount(...)
The setEnabledFeatures(string[])
function can be used to define the feature list.
import { setEnabledFeatures } from 'vue-feature-flipping'
setEnabledFeatures(['FF1', 'FF2', 'FF3'])
You can dynamically refresh the list, using socket.io
or setInterval
like this example:
setInterval(
async () => setEnabledFeatures(await getFeaturesFromBackend('http://localhost:8081')),
60000
)
A function is defined to check a feature.
If the feature is not enabled, the function returns false
.
import { isEnabled } from 'vue-feature-flipping'
if (isEnabled('XXXXX')) {
// ...
}
if (isEnabled('XXXXX', true)) {
// ...
}
A directive named feature-flipping
can be used into <template>
.
Without argument, the directive works like v-if
. If the feature is not enabled, the DOM is removed.
<menu>
<entry>First</entry>
<entry v-feature-flipping="'XXXXX'">Second</entry>
<entry v-feature-flipping.not="'XXXXX'">Third</entry>
<entry v-feature-flipping.default="'XXXXX'">Fourth</entry>
</menu>
The argument class
allow the directive to work like v-bind:class
. If the feature is enabled, the classes are apply to element.
<menu>
<entry>First</entry>
<entry v-feature-flipping:class="{ key: 'XXXXX', value: 'class1' }">Second</entry>
<entry v-feature-flipping:class="{ key: 'XXXXX', value: ['class1', ['class2'], { 'class3': true }] }">Third</entry>
<entry v-feature-flipping:class.not="{ key: 'XXXXX', value: 'class1' }">Fourth</entry>
<entry v-feature-flipping:class.default="{ key: 'XXXXX', value: 'class1' }">Fifth</entry>
</menu>
The argument style
allow the directive to work like v-bind:style
. If the feature is enabled, the styles are apply to element.
<menu>
<entry>First</entry>
<entry v-feature-flipping:style="{ key: 'XXXXX', value: { style1: 'value1', style2: 'value2' } }">Second</entry>
<entry v-feature-flipping:style="{ key: 'XXXXX', value: [{ style1: 'value1' }, { style2: 'value2' }] }">Third</entry>
<entry v-feature-flipping:style.not="{ key: 'XXXXX', value: { style1: 'value1' } }">Fourth</entry>
<entry v-feature-flipping:style.default="{ key: 'XXXXX', value: { style1: 'value1' } }">Fifth</entry>
</menu>
A guard is defined to intercept all routes defining featureFlipping
meta field.
If the feature is not enabled, the router redirect to "/"
route.
import VueRouter from 'vue-router'
import { Test1Component, Test2Component, Test3Component } from '...'
createRouter({
routes: [
{ path: '/test1', component: Test1Component, meta: { featureFlipping: { key: 'XXXXX' } } },
{ path: '/test2', component: Test2Component, meta: { featureFlipping: { key: 'XXXXX' }, redirect: '/error' } },
{ path: '/test3', component: Test3Component, meta: { featureFlipping: { key: 'XXXXX', not: true } } },
{ path: '/test4', component: Test4Component, meta: { featureFlipping: { key: 'XXXXX', default: true } } },
]
})
default
: default behaviorWhen the plugin is not initialized, or when any error occurs when user try to initialize this plugin, it's necessary to define a default behavior: should we activate the function or should we disable it?
The default value defines this behavior: the value is used when plugin is not initialized or initialized with null
.
Example:
try {
let features = await getFeaturesFromBackend()
setEnabledFeatures(features)
} catch (e) {
setEnabledFeatures(null) // use default
}
not
: reversed renderingIn some cases, we have to define a behavior when the feature is disabled.
The not
option activate this behavior.
if (isEnabled('F1') && isEnabled('F2') || isEnabled('F3')) ...
FAQs
"Feature flipping" plugin for Vue.js
The npm package vue-feature-flipping receives a total of 649 weekly downloads. As such, vue-feature-flipping popularity was classified as not popular.
We found that vue-feature-flipping demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.