Incognitus Feature Flag (VueJS)

Integrating Incognitus

Integration of Incognitus into your VueJS application is done in 2 setps.

Step 1) main.ts

Install VuetureFlag into Vue

  Vue.use(new VuetureFlag(), {
      tenantId: You_Tenant_ID,
      applicationId: Your_Application_ID,
  });

  new Vue(
      mixins: [VuetureFlagMixin],
      ...
  ).$mount('#app');

Key | Description --- | --- tenantId | Your tenant id applicationId | The id of the application

Step 2) App.vue (If you want get the initial features syncronusly)

Add a conditional render to your #app div

<template>
  <div id="app" v-if="$root.vuetureFlag.isInitialized">
</template>

Using in the template

Feature flags can be used to section off a chuck of template. To do this just add the v-feature-flag directive, with the value of your feature flag name in single quotes, to the element you would like to feature flag. You can also set the feature flag to hide an element when the feature flag is on by adding the modifier :hidden to the directive.

Below are a few examples.

<div id="app" v-feature-flag="'Fizzbuzz'">
  <span>Fizzbuzz shown when enabled</span>
</div>
<div id="app" v-feature-flag:hidden="'Foobar'">
  <span>Foobar hidden if enabled</span>
</div>

Caching

Currently all known feature flags are cached when the app initializes. New features that are not found in the cache are retrieved on-demand. The cache stays in place until the app is reloaded.

Future Caching Stories

• Save verified cache to local storage
• Provide hard cache refresh (wipe cache if fails)
• Provide soft cache refresh (keep cache if fails)
• Customizable cache refresh times
• Option to disable cache