I am interested in incorporating a "feature toggling mechanism" into my Vue application. Although I have set up a basic system, I want to explore the methods outlined in a article by Pete Hodgson. The concept of "Inversion of Decision" seems particularly intriguing, but I am uncertain how to implement it in my Vue application.
Below is what I have currently:
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;
},
};
In a component, I control visibility like this:
b-button(v-if="this.$feature('myFeature')") I'm visible only if the feature is enabled
Although this is a simplistic example, handling more complex feature toggles may pose a challenge.
How can I effectively incorporate the described feature toggle techniques?