Features

Context-Aware Evaluation

Evaluate flags based on request context including user roles, device type, environment, and custom business rules.

// feature-flags.config.ts
import { defineFeatureFlags } from '#feature-flags/handler'

export default defineFeatureFlags((context) => {
  return {
    // User role-based
    isAdmin: context?.user?.role === 'admin',
    
    // User status-based
    betaFeature: context?.user?.isBetaTester ?? false,
    
    // Device-based
    mobileFeature: context?.device?.isMobile ?? false,
    
    // Environment-based
    devTools: process.env.NODE_ENV === 'development'
  }
})

Benefits:

• Personalized user experiences
• Role-based feature access
• Device-specific optimizations
• Environment-specific features

Learn more about Context-Aware Configuration →

A/B/n Testing with Variants

Built-in support for A/B testing and multivariate experiments with persistent user assignment.

export default defineFeatureFlags(() => ({
  // Simple A/B test
  buttonDesign: {
    enabled: true,
    variants: [
      { name: 'control', weight: 50, value: 'original' },
      { name: 'treatment', weight: 50, value: 'new-design' }
    ]
  },
  
  // Gradual rollout
  newFeature: {
    enabled: true,
    variants: [
      { name: 'disabled', weight: 80, value: false },
      { name: 'enabled', weight: 20, value: true }
    ]
  }
}))

Features:

• Persistent variant assignment across sessions
• Configurable weight distribution
• Support for A/B/C/D/n tests
• Gradual feature rollouts

Learn more about Variants & A/B Testing →

Server-Side Support

Full server-side evaluation for consistent behavior and better performance.

// server/api/dashboard.ts
export default defineEventHandler((event) => {
  const { isEnabled, getVariant } = getFeatureFlags(event)

  if (!isEnabled('newDashboard')) {
    throw createError({
      statusCode: 404,
      message: 'Dashboard not available'
    })
  }

  const variant = getVariant('experiment')
  return { data: 'response', variant }
})

Benefits:

• Consistent behavior across server and client
• Protected API routes
• SEO optimization
• Better performance

TypeScript Support

Automatic type generation from your flag configuration with full autocomplete and type safety.

const { isEnabled } = useFeatureFlags()

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

Features:

• Auto-generated types
• Full autocomplete support
• Compile-time error detection
• Type inference for flag values

Validation & Build Checks

Built-in validation to catch configuration errors and undeclared flag usage.

// scripts/validate-flags.ts
import { validateFeatureFlags } from 'nuxt-feature-flags/build'

const errors = await validateFeatureFlags({
  configPath: './feature-flags.config.ts',
  srcPatterns: ['**/*.vue', '**/*.ts'],
  failOnErrors: true
})

Checks:

• Undeclared flags in code
• Invalid flag configurations
• Unreferenced flags
• Typos in flag names

Learn more about Validation →

Template Directives

Declarative syntax for feature-flagged content in Vue templates.

<template>
  <!-- Simple flag check -->
  <div v-feature="'newDashboard'">
    New Dashboard Content
  </div>
  
  <!-- Variant-specific rendering -->
  <button v-feature="'buttonDesign:treatment'">
    New Button Design
  </button>
</template>

Nuxt 3 Integration

Seamless integration with Nuxt 3 features:

• Auto-imports: Composables and utilities are automatically imported
• Runtime config: Support for environment-based configuration
• Server routes: Full support in API routes and middleware
• SSR compatible: Works with server-side rendering
• Type generation: Automatic TypeScript type generation

Performance Optimized

Efficient flag evaluation with minimal overhead:

• Per-request caching: Flags are cached for the duration of each request
• Minimal bundle size: ~3KB gzipped on client-side
• No runtime dependencies: Lightweight and fast
• Optimized evaluation: Fast hash-based variant assignment