Vue feature flags and remote configuration

@featurevisor/vue gives components functions that read features and variables from a shared JavaScript SDK instance.

Install#

Command

npm install @featurevisor/vue @featurevisor/sdk

Set up the application#

Create an instance and give it to the application with setupApp:

src/main.js

import { createApp } from 'vue'
import { createFeaturevisor } from '@featurevisor/sdk'
import { setupApp } from '@featurevisor/vue'
import App from './App.vue'
const response = await fetch(
  'https://cdn.example.com/featurevisor-all.json',
)
if (!response.ok) {
  throw new Error(`Could not fetch datafile: HTTP ${response.status}`)
}
const f = createFeaturevisor({
  datafile: await response.json(),
  context: {
    userId: '8f2a',
    country: 'nl',
  },
})
const app = createApp(App)
setupApp(app, f)
app.mount('#app')

Every function below reads this instance, with its context.

Read values#

Each function returns the value at the moment it is called. It is a plain value, not a ref, so it does not update when the datafile or the context changes. A feature you switch off stays visible in an open page until its component is created again. See Keep values live for components that must follow those changes.

useFlag#

Returns whether a flag is enabled:

<script setup>
  import { useFlag } from '@featurevisor/vue'
  const newCheckout = useFlag('checkout')
</script>
<template>
  <NewCheckout v-if="newCheckout" />
  <Checkout v-else />
</template>

useVariation#

Returns a feature's variation, or null:

<script setup>
  import { useVariation } from '@featurevisor/vue'
  const variation = useVariation('pricing')
</script>
<template>
  <NewPricing v-if="variation === 'treatment'" />
  <CurrentPricing v-else />
</template>

In TypeScript, name the values it can return:

type PricingVariation = 'control' | 'treatment'
const variation = useVariation<PricingVariation>('pricing')
// PricingVariation | null

useVariable#

With a feature key and a variable key, returns a feature variable. For 8f2a, the label is Nu kopen:

<script setup>
  import { useVariable } from '@featurevisor/vue'
  const label = useVariable('buyButton', 'label')
</script>
<template>
  <button>{{ label }}</button>
</template>

With one key, it returns a global variable:

const supportEmail = useVariable('supportEmail')

In TypeScript, pass the type you expect. It is not checked at runtime. For types that match your project, use code generation:

type CheckoutSettings = {
  currency: string
  paymentMethods: string[]
}
const settings = useVariable<CheckoutSettings>('checkoutSettings')

Context in a component#

Each function takes context as its last argument, merged over the instance context for that read:

const context = {
  plan: 'paid',
}
const colour = useVariable('buyButton', 'colour', context)
// '#047857'

useSdk#

useSdk returns the instance itself, for anything the functions above do not cover. Call it, like the others, inside setup.

Keep values live#

To follow datafile, context and sticky changes, wrap a read in a ref and update it on the instance's events. This is application code, not part of the package:

src/useLiveFlag.js

import { onUnmounted, ref } from 'vue'
import { useSdk } from '@featurevisor/vue'
export function useLiveFlag(featureKey) {
  const f = useSdk()
  const enabled = ref(f.isEnabled(featureKey))
  const update = () => {
    enabled.value = f.isEnabled(featureKey)
  }
  const unsubscribers = [
    f.on('datafile_set', update),
    f.on('context_set', update),
    f.on('sticky_features_set', update),
  ]
  onUnmounted(() => {
    unsubscribers.forEach((unsubscribe) => unsubscribe())
  })
  return enabled
}

Tracking#

To record when a user sees a feature, add a module to the instance and act in its afterEvaluation. Google Analytics has a complete example.