Feature toggles are a powerful utility in today's world, especially for teams who deploy many features on a daily basis. And when you couple this with a powerful framework like Nuxt.js, you really develop the capabilities to move quickly and retain a high level of code quality.
So what is a feature toggle exactly? 🤔
A feature toggle is a simple condition that is controlled using an external or local configuration to determine if a user can see a feature.
They are very helpful when introducing new features or introducing a big change to an existing set of users in a production application or a set of applications.
For example, let’s say you release a new feature and unexpectedly this feature starts breaking the page for certain users. What do you do? You could quickly create a patch or hotfix and push it into production, but this would lead to reduced code quality and the possibility of introducing a //TODO comment so the hotfix is later removed and a better solution is then added. This would also require a new deploy which could take some time depending on the complexity of your infrastructure.
With a feature toggle, all you need to do is update a JSON file that your application consumes to determine what features to show. Once the file is updated, voila! the issue is resolved.
When I worked as a front end engineer in a company called Gilt.com, I experienced this first hand with an internal feature toggle system, it allowed the developers and product teams to easily roll out new features to users without the need to redeploy anything to production, the only change required was to update an external configuration service. In Gilt.com, they had an internal application where you could set each condition in the feature toggle and how much traffic would be exposed to the toggle. This would then be applied to the front end applications once the service was requested by the front end applications. This works really well and was an invaluable technology at the time.
So why Nuxt.js?
Nuxt.js is a framework built on top of Vuejs and a number of Vuejs plugins. The framework provides a powerful yet simple architecture for developers to build scalable server-side rendered applications or as a single page application that can be exported as a static website.
More can be found here on what Nuxt.js is https://nuxtjs.org/
I’ve been working with Nuxt for a while and I’m quite impressed with the simplicity and the enjoyment of using the framework. It is quite simple to use advanced concepts that are normal in today's front end community, concepts like dynamic imports or server-side rendering are a dream with Nuxt since they don’t require the need to configure anything, it works straight out of the box.
So I wanted to provide the same simplicity with feature toggles for developers who work with Nuxt.
So I built a Nuxt module called the `nuxt-feature-toggle`
What is the Nuxt feature toggle?
This package is a simple module you can easily install into your Nuxt application, you can very easily define your features using an object defined in the main Nuxt.config.js file, or you can fetch an external source and return a promise.
In your component, you will have access to a special component called <FeatureToggle />. This is basically just an if statement, but will respect the value you have set for the feature, for it to be either visible or hidden. Also if you were to server-side render the page and the toggle was disabled, then no HTML would appear in your source code.
<feature-toggle name="my-unique-key" :value="true">
<p>This can only show if the toggle is enabled</p>
</feature-toggle>Also, to provide greater ease of use for developers who may want to test or debug a feature deployed to production, you can override the configuration using a query string. As shown below in the preview.
The query string can also be restricted to certain users using some logic from the VueX store or the context of your application, this is all defined in an additional plugin that you can easily implement into your application.
More can be found here on extending the module https://www.npmjs.com/package/nuxt-feature-toggle#allowing-access
In conclusion.
In today's world of rapid deployment of high-quality code, feature toggles are an invaluable asset. And having something like this for such a simple yet powerful framework like Nuxt really improves the developer experience and helps to make the work we do more enjoyable but also more effective.
Check out the NPM package and let me know what you think :) I’m always open to improvements and to help make someone else's work life that little bit more enjoyable
Also, follow me on Twitter at
Thank you.
