Feature Flags in Vue.js

Install the toggly package

$ npm i -s @ops-ai/vue-feature-flags-toggly

Import the Toggly service inside your main.js file.

import { toggly } from "@ops-ai/vue-feature-flags-toggly";

Declare $toggly as a global property & initialize it by running the $toggly.init method and by providing your App Key from your Toggly application page

app.use(toggly, {
  appKey: "<YOUR_APP_KEY>", // You can find this in app.toggly.io
  environment: "<YOUR_APP_ENVIRONMENT>", // You can find this in app.toggly.io
});

Using the Feature Component

Now you can start using the Feature component.

<Feature feature-key="firstFeature">
  <p>This feature can be turned on or off.</p>
</Feature>

pageFeature Component

Directly Checking a Flag

You can also programmatically check a flag for being ON or OFF, by simply injecting it in any component.

export default {
  inject: ['$toggly'],
  ...
}

await this.$toggly.isFeatureOn('firstFeature')

pageDirectly Checking a Flag