Feature toggle module for Nuxt.js
npm install nuxt-feature-toggleThis is a simple module for Nuxt.js to add support for a feature toggle system.
``sh`
npm install nuxt-feature-toggleor
yarn add nuxt-feature-toggle
The toggles can be defined as a function or just as an object.
#### As a function
`javascript
module.exports = {
modules: ['nuxt-feature-toggle'],
featureToggle: {
toggles: () => {
return Promise.resolve({
'my-unique-key': true
})
}
}
}
`
#### As an object
`javascript
module.exports = {
modules: ['nuxt-feature-toggle'],
featureToggle: {
toggles: {
'my-unique-key': true
}
}
}
`
` This can only show if the toggle is enabledhtml`
setting in nuxt.config.js to **configure
feature toggles on-the-fly without having to rebuild** (only need to restart Nuxt using nuxt start).`javascript
module.exports = {
modules: ['nuxt-feature-toggle'],
publicRuntimeConfig: {
featureToggle:{
toggles: {
somePreviewFeature: process.env.FEATURE_ENABLE_SOME_PREVIEW_FEATURE,
}
}
}
}
`
> Note 1: FEATURE_ENABLE_SOME_PREVIEW_FEATURE is an arbitrary name, the package doesn't depend on it.
You can use "Feature Flag" names eg. FF_PREVIEW_FEATURE or whatever suits you.> Note 2: This package has built-in yn support which mean you don't have to do anything to get your env variable as Boolean value. You can also use
0/1, y/n or any other value supported by the package. This will also work when queryString is set to true.Now you just need to change your environment variables an restart Nuxt to toggle your features!
$3
If you're using function/promise based toggles resolution, you should not use publicRuntimeConfig:
while it's technically possible to use a function in runtimeConfig, it is not recommended.A function/promise based toggles resolution will NOT be resolved in the plugin, only on build.
Instead you should either:
* Use a Promise/Function in
featureToggle.toggles like you did before
* Switch to object mode in publicRuntimeConfig.featureToggle.toggles.As now you can use environment variables and just restart the server, many people can get rid of Promises returning toggles depending on the environment.
Use with the query string
To use the query string with your feature toggles, first enable it in your configuration file.
`javascript
module.exports = {
modules: ['nuxt-feature-toggle'], featureToggle: {
queryString: true,
toggles: {
'my-unique-key': true
}
}
}
`The option
queryString is used to enable query string support, so if the url contains a toggle query string, then the feature toggles with the matching value will be forced to show.$3
To change the default toggle prefix for
toggle, you can now pass an option to change it to anything you like, such as:
`html
This can only show if the toggle is enabled
`In this case, the key is now
_t_my-unique-key$3
You can control the access of the query string using a function, this can be defined using the following approach.
1. Create a new plugin file and import it into your nuxt.config.js file.
2. Add the following code to your new plugin
`javascript
export default function({ $featureToggle }) {
$featureToggle.isQueryStringAllowed(props => {
return true;
})
}
`Here you can access the props for the feature toggle component, and you can access the context using the exported function.
If no function is defined, and the
queryString option is true, then all query strings are allowed.$3
Once the querystring options are setup, you can enter the following to change the feature toggle, ensure
toggle_ is prefixed to the name of the feature toggle.`
https://website.com?toggle_my-unique-key=false
`This will set the feature toggle 'my-unique-key' to false when viewing the page.
To use the demo
1. Go to the
examples/demo folder
2. Run the command yarn
3. Once done, run yarn dev
4. Navigate to http://localhost:3000`The demo will show how the query string functionality works with the feature toggles. You should see a control box on the left hand side where you can manipulate the query strings in the URL. This will update the feature toggle on the page.
