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

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

module.exports = {
  modules: ['nuxt-feature-toggle'],

  featureToggle: {
    toggles: () => {
      return Promise.resolve({
        'my-unique-key': true
      })
    }
  }
}

As an object

module.exports = {
  modules: ['nuxt-feature-toggle'],

  featureToggle: {
    toggles: {
      'my-unique-key': true
    }
  }
}

2. Use the feature toggle component

<feature-toggle name="my-unique-key" :value="true">
  <p>This can only show if the toggle is enabled</p>
</feature-toggle>

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

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!

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.

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.

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:

<feature-toggle name="my-unique-key" :value="true" prefix="_t">
  <p>This can only show if the toggle is enabled</p>
</feature-toggle>

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

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.

License

MIT License