Composables

useVariant()

Get the variant of a feature flag.

Returns the variant details for a feature flag, useful for A/B testing and multivariate flags.

Usage

<template>
  <component :is="buttonComponent" />
</template>

<script setup>
const variant = useVariant('checkout-button')

const buttonComponent = computed(() => {
  switch (variant.value.name) {
    case 'blue': return BlueButton
    case 'green': return GreenButton
    default: return DefaultButton
  }
})
</script>

Type

function useVariant(name: string): ComputedRef<Variant>

interface Variant {
  name: string
  enabled: boolean
  payload?: { type: string; value: string }
}
name
string required
The feature flag name.

Returns

ComputedRef<Variant> — the variant object. Returns { name: 'disabled', enabled: false } for unknown flags.

Copyright © 2026