Feature toggles in VueJS

Question

I'd like to add some "feature toggling mechanism" to my Vue application. While I have implemented a rather basic setup, I'd like to consider the techniques described in this article by Pete Hodgson. Especially the aspect "Inversion of Decision" looks meaningful but I'm struggling to get an idea of how to adapt this to my Vue application.

This is what I have so far.

config.js

const yn = require("yn");

const config = {
  // Add new feature toggles here
  features: {
    myFeature: parse(
      window.myaEnv.myFeature || process.env.VUE_APP_MY_FEATURE,
      false
    ),
  },
};

function parse(value, fallback) {
  if (typeof value === "undefined") {
    return fallback;
  }
  switch (typeof fallback) {
    case "boolean":
      return yn(value);
    case "number":
      return value ? JSON.parse(value) : fallback;
    default:
      return value;
  }
}

function feature(name) {
  return config.features[name];
}

export { config };

export default {
  install(Vue) {
    Vue.appConfig = config;
    Vue.feature = feature;

    Vue.prototype.$appConfig = config;
    Vue.prototype.$feature = feature;
  },
};

Then in e.g. a component I toggle the visibility like this:

b-button(v-if="this.$feature('myFeature')") I'm visible only if feature is enabled

While this is a very basic example I can imagine that feature toggles might become more complex to handle like this.

How to apply the described feature toggle techniques?

Answer 1

Did you check this Vue plugin: https://www.npmjs.com/package/vue-feature-toggle ?

It looks promising to me and something that can help you to achieve your goal.

NOTE: I am going to implement Feature Toggle in VueJS in the next couple of months so still researching for the best approach.

UPDATE: In my case, I wasn't able to make work everything as expected using vue-feature-toggle lib, so I build a custom solution - keep feature toggles in store, and have mixin with function isFeatureToggled(featureToggleKey)

Answer 2

you might also consider to use Unleash together with the vue-unleash-plugin. This plugin requires that your project use Vuex.

PS! I am the author of Unleash, and any feedback on how we can ease the integration with Vue is welcomed.