Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/stephenkr/nuxt-feature-toggle

The nuxt feature toggle module
https://github.com/stephenkr/nuxt-feature-toggle

feature nuxt nuxt-module nuxtjs toggle toggle-switches

Last synced: 23 days ago
JSON representation

The nuxt feature toggle module

Lists

README 

        
nuxt-feature-toggle


This is a simple module for Nuxt.js to add support for a feature toggle system.





  

    

  

  

    

  

  

    

  

  


  

    

  

  

    

  






  Release notes




## Features

- Dynamically pull in your feature toggles when the application starts

- Set a static list of feature toggles

- Optional query string support to override a feature toggle



## Usage



### 1. Install the plugin



```sh

npm install nuxt-feature-toggle

# or

yarn add nuxt-feature-toggle

```



### 2. Add module to nuxt.config.js along with the feature toggle options.



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

    }

  }

}

```



### 2. Use the feature toggle component



```html



  
This can only show if the toggle is enabled



```



## RuntimeConfig support

If using Nuxt >= 2.13, you can use the new `publicRuntimeConfig` 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](https://github.com/sindresorhus/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!



### Important note on `publicRuntimeConfig` and Promise / function based toggles

**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](https://nuxtjs.org/guide/runtime-config/).



**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.



### Change key prefix



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`



### Allowing access



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.



### Usage



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`



## About the demo



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.



![](./docs/assets/demo-1.gif)



# License



MIT License