vue-feature-toggle

> Enables advanced feature-toggle with vue


Info

Vue-Feature-Toggle implements the feature-toggle-api v 3.4.1".
Only a subset of features is listed here. For the others, watch the documentation of the api.

This package is COMPATIBLE WITH VUE3!!!!!

Install

`` shell
npm install vue-feature-toggle --save
`

The Problem


Imagine you have an onlineshop with an testmode and in multiple languages.
Your shop is written in vue. Anywhere you have a vue-template like this:
` html




`
It's generally a bad idea to have visibility rules in the template. Of course, by refactoring the template a little bit the code will look better.
But that's not the point. The problem is: The view-logic is spread in .html and .js files and if the viewlogic changes, you have to change at least them. And all visibility rules are spread over the whole system.
That's not good.

The solution

Feature-toggle. All View-Logic is placed in one place. This can be a config file, a webservice or a tool with a User Interface.a
When you want to change a visibility rule, for example "Show feature XYZ also in the french shop", you just have to update the config or add this info in an UI. And no developer is needed for it.

Read the article from Martin Fowler about feature toggle for a more understanding.

The Usage

Look in the example folder for working examples.

$3

Create a vue project, if you don't have one.

Now install the vue-feature-toggle component.
` shell
npm install vue-feature-toggle --save
`


Now go into any vue-component and add the following:
` html



`

See more the projects in the example-folder.

$3

Only a subset of features is listed here. See the documentation of the feature-toggle-api for more features

For the next examples we will always use the HTML from above. Just insert the visibility rules under the other rule

#### Basic visibility
`javascript
// shows Feature1
//Feature2 is not configured, so it will be hidden
feature.setFlag('feature1',true);

//You can also write it like this
feature.setFlag('feature1',function (rule) {
//here would be some more complex logic, in this example we keep it simple
return true;
});
`
`javascript
/*
shows all features with name feature2, in this case:




*/
feature.setFlag('feature2', function (rule) {
return true;
});

/*
This overwrites the rule above for "feature2", variant "new"
-> shown
-> hidden
-> shown
-> shown
*/
feature.setFlag('feature2','new', function (rule) {
return false;
});
`
`javascript
/*
You can pass data via the data-attribute. Corresp. HTML-Tag:
*/
feature.setFlag('feature3','new', function (rule) {
return rule.data == "grumpfel";
});

//Write a : before the data-tag to parse the content in the data-attribute Otherwise the data is returned as a string.
feature.setFlag('feature3','new', function (rule) {
return rule.data.text == "grumpfel";
});
`
#### Default flag
Bored of writing the same flag rule again and again? Use defaultflag. This is the default-rule and will be overwritten by feature.setFlag() - rules.
` javascript
feature.setDefaultFlag(function(rule){
return true;
});

feature.setFlag('feature2', 'new', function(rule){
return false;
});
/*
"Feature2", variant "new" is overwritten, all other features have the defaultVisibility
-> shown
-> hidden
-> shown
-> shown
*/
`

#### Required Flag
This rule is allways executed, before the other rules. When it returns false, the other rules are ignored.
` javascript
/*
Imagine a config that is loaded via ajax. When the name is in the config, it returns true.
And this config looks like this:
var globalConfig = { "feature2" : true }
*/

feature.setRequiredFlag(function(rule){
//In this case it returns true, when name == 'feature2'
return globalConfig[rule.name] === true;
});

/*
feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
*/
feature.setFlag('feature2','new',function(rule){
return false;
});

/*
feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
*/
feature.setFlag('feature3',function(rule){
return true;
});

/*
-> shown
-> hidden
-> shown
-> shown

-> hidden
-> hidden
*/
`

#### Container Tag
Normally a feature has a div-element as root-element.
`html
an amazing feature
will be rendered to (if visible):



`
But unfortunately sometimes div-elements are already styled by legacy-css-classes.
To prevent this, you can define the root-element.
`html
an amazing feature
will be rendered to (if visible):
an amazing feature
`

#### ShowLogs
Imagine this following html-snippet:
`html

This feature should be shown
`
All developers of the world agree with you, debugging sth lik this is horrible. But don't worry, we have a perfect solution for it. And it's just one line of code.
`javascript
feature.showLogs(); //or feature.showLogs(true);
`
This returns a log like the following:
`html
Check Visibility of Feature "anAmazingFeature".
The requiredVisibility rule returns false. This feature will be hidden.

Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.
No visibility rule found matching name and variant.
No rules found for name anotherAmazingFeature without variants.
No default rule found.
Only the requiredVisibility rule was found. This returned true. => This feature will be visible.
`
With this you don't have to waste your time with debugging the visibility state.

#### Log
Log a custom message, when showLogs() == true.
`javascript
feature.log("Here's my custom message");
`

#### Noscript
You work in a company and your customers have disabled javascript? Well, that makes life harder but we can still use it. We can provide at least a basic functionality with pure css.
Just look at the modified index.html file.
` html
















``

License

MIT.
Copyright (c) 2025 Manuel Gelsen