Skip to content
The nuxt feature toggle module
Branch: master
Clone or download
Latest commit 814830f May 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add support for circle CI (#1) May 20, 2019
docs/assets docs: Document the demo May 19, 2019
examples/demo docs: Improve the demo May 19, 2019
lib chore: Setup specs May 20, 2019
test
.editorconfig Initialise module with example May 18, 2019
.eslintrc.js
.gitignore chore: clean up May 18, 2019
.prettierrc Initialise module with example May 18, 2019
CHANGELOG.md chore(release): 0.3.4 May 20, 2019
LICENSE Initialise module with example May 18, 2019
Readme.md docs: Update readme badges May 20, 2019
package.json
yarn.lock chore: Setup specs May 20, 2019

Readme.md

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

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.

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

You can’t perform that action at this time.