Vue.js SDK

Featurevisor comes with an additional package for Vue.js, for ease of integration in your Vue.js application for evaluating feature flags.

Installation#

Install with npm:

$ npm install --save @featurevisor/vue

Setting up the application#

Use setupApp function to set up the SDK instance in your Vue application:

import { createApp } from 'vue'
import { createFeaturevisor } from '@featurevisor/sdk'
import { setupApp } from '@featurevisor/vue'
const datafileUrl = 'https://cdn.yoursite.com/datafile.json'
const datafile = await fetch(datafileUrl).then((res) => res.json())
const f = createFeaturevisor({
  datafile,
})
const app = createApp({
  /* root component options */
})
setupApp(app, f)

This will set up the SDK instance in your Vue application, and make it available in all components later.

Functions#

The package comes with several functions to use in your components:

The evaluation functions return the value calculated when the function is called. Call them again when your application changes the evaluation context or replaces the SDK datafile.

useFlag#

Check if feature is enabled or not:

<script setup>
  import { useFlag } from '@featurevisor/vue'
  const featureKey = 'myFeatureKey'
  const context = { userId: '123' }
  const isEnabled = useFlag(featureKey, context)
</script>
<template>
  <div v-if="isEnabled">Feature is enabled</div>
  <div v-else>Feature is disabled</div>
</template>

useVariation#

Get a feature's evaluated variation:

<script setup>
  import { useVariation } from '@featurevisor/vue'
  const featureKey = 'myFeatureKey'
  const context = { userId: '123' }
  const variation = useVariation(featureKey, context)
</script>
<template>
  <div v-if="variation === 'b'">B variation</div>
  <div v-else-if="variation === 'c'">C variation</div>
  <div v-else>Default experience</div>
</template>

TypeScript users can optionally narrow the result to the expected variation values:

type CheckoutVariation = 'control' | 'treatment'
const variation = useVariation<CheckoutVariation>('checkout')
// CheckoutVariation | null

Without the generic, existing usage continues to return string | null.

useVariable#

Get a feature's evaluated variable value:

<script setup>
  import { useVariable } from '@featurevisor/vue'
  const featureKey = 'myFeatureKey'
  const variableKey = 'color'
  const context = { userId: '123' }
  const color = useVariable(featureKey, variableKey, context)
</script>
<template>
  <div>Color: {{ color }}</div>
</template>

TypeScript users can optionally provide the expected variable type:

interface CheckoutConfig {
  title: string
  maxItems: number
}
const config = useVariable<CheckoutConfig>('checkout', 'config')
// CheckoutConfig | null

Without the generic, existing usage continues to return the general VariableValue | null type. Generic types describe a compile time expectation and do not validate values at runtime. Use code generation for project aware feature keys, variable keys, variation values, and variable types.

Use the overloaded useVariable(variableKey, context) signature to evaluate a global variable with a variable key and optional context:

const email = useVariable<string>('supportEmail', { country: 'nl' })

useSdk#

Get the SDK instance:

<script setup>
  import { useSdk } from '@featurevisor/vue'
  const f = useSdk()
</script>
<template>
  <div>...</div>
</template>

Tracking#

To track when a feature is exposed to a user, register a module on the SDK instance and react to evaluations in its afterEvaluation callback. See the Google Analytics tracking guide for an example.

Optimization#

Given the nature of components in Vue.js, they can re-render many times.

You are advised to minimize the number of calls to Featurevisor SDK in your components by using memoization techniques.

Example repository#

You can find a fully functional example of a Vue.js application using Featurevisor SDK here: https://github.com/featurevisor/featurevisor-example-vue.