API Reference

Client-Side API

useFeatureFlags()

Returns an object with the following properties and methods:

flags

• Type: Ref<ResolvedFlags>
• Description: A reactive reference containing all resolved feature flags

const { flags } = useFeatureFlags()
console.log(flags.value)

isEnabled(flagName, variant?)

• Type: (flagName: string, variant?: string) => boolean
• Description: Checks whether a feature flag is enabled

const { isEnabled } = useFeatureFlags()

// Simple flag check
if (isEnabled('newDashboard')) {
  // Show new dashboard UI
}

// Check specific variant
if (isEnabled('buttonDesign:treatment')) {
  // User is in the treatment group
}

getVariant(flagName)

• Type: (flagName: string) => string | undefined
• Description: Returns which variant the user is assigned to

const { getVariant } = useFeatureFlags()

const variant = getVariant('buttonDesign')
console.log(variant) // 'control' | 'treatment' | undefined

getValue(flagName)

• Type: (flagName: string) => any
• Description: Retrieves the actual value of a feature flag

const { getValue } = useFeatureFlags()

const isDarkMode = getValue('darkMode') // true | false
const maxItems = getValue('maxItems') // 10
const theme = getValue('theme') // 'dark' | 'light'

getFlag(flagName)

• Type: (flagName: string) => ResolvedFlag | undefined
• Description: Returns the complete flag object with all its properties

const { getFlag } = useFeatureFlags()

const flag = getFlag('buttonDesign')
console.log(flag)
// {
//   enabled: true,
//   value: 'new-design',
//   variant: 'treatment'
// }

fetch()

• Type: () => Promise<void>
• Description: Manually refreshes all feature flags

const { fetch } = useFeatureFlags()

// Refresh flags after user login
async function handleLogin(user) {
  await loginUser(user)
  await fetch() // Refresh flags with user context
}

Server-Side API

getFeatureFlags(event)

Evaluates and returns feature flags for a server-side request.

export default defineEventHandler((event) => {
  const { flags, isEnabled, getVariant, getValue } = getFeatureFlags(event)
  
  if (!isEnabled('apiV2')) {
    throw createError({
      statusCode: 404,
      message: 'API v2 not available'
    })
  }
  
  return { data: 'response' }
})

Template Directives

v-feature

A custom Vue directive that shows or hides elements based on feature flag state.

<template>
  <!-- Show element if flag is enabled -->
  <div v-feature="'newDashboard'">
    <h1>Welcome to the New Dashboard!</h1>
  </div>
  
  <!-- Show for specific variant -->
  <button v-feature="'buttonDesign:treatment'">
    New Fancy Button
  </button>
</template>

Note: The v-feature directive is client-side only. For server-rendered content, use v-if with isEnabled().

Type Generation

The module automatically generates TypeScript types from your flag configuration:

// Types are auto-generated
const { isEnabled } = useFeatureFlags()

isEnabled('newDashboard')     // ✅ Type-safe
isEnabled('unknownFlag')      // ❌ TypeScript error

Types are regenerated when:

• You run npm run dev or yarn dev
• You run nuxi prepare
• Your flag configuration file changes (in dev mode)