Variant Flags

<FeatureVariant> — renders one of several named slots depending on a flag's current string variant, for A/B tests and multi-step rollouts where a flag holds a variant name instead of a plain boolean.

app.use(FeatureToggles, {
  flags: { checkoutFlow: 'v2' },
})

<FeatureVariant name="checkoutFlow">
  <template #v1><CheckoutV1 /></template>
  <template #v2><CheckoutV2 /></template>
  <template #fallback><CheckoutLegacy /></template>
</FeatureVariant>

URL overrides work identically to boolean flags: ?feature:checkoutFlow=v2.

Props

name

string · required, no default

Flag name to read the variant from.

Slots

[variant]

A slot named after each possible variant string (v1, v2, ... — whatever names your flag's values use). The slot matching the flag's current value is rendered.

fallback

Rendered when no slot matches the current variant.