Feature flags for Nuxt with A/B testing and variant support
npm install nuxt-feature-flags!nuxt-feature-flags
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
bash
npx nuxi module add nuxt-feature-flags
`
🚀 Quick Start
$3
`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-feature-flags']
})
`
$3
`ts
// feature-flags.config.ts
import { defineFeatureFlags } from '#feature-flags/handler'
export default defineFeatureFlags(() => ({
newDashboard: true,
darkMode: false,
// A/B test with variants
buttonDesign: {
enabled: true,
variants: [
{ name: 'control', weight: 50, value: 'blue' },
{ name: 'treatment', weight: 50, value: 'red' }
]
}
}))
`
`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-feature-flags'],
featureFlags: {
config: './feature-flags.config.ts'
}
})
`
$3
In components:
`vue
Dark mode content
`
In server routes:
`ts
// server/api/data.ts
export default defineEventHandler((event) => {
const { isEnabled, getValue } = getFeatureFlags(event)
if (!isEnabled('newDashboard')) {
throw createError({ statusCode: 404 })
}
return { data: 'Dashboard data' }
})
`
🎯 Context-Aware Flags
Create dynamic flags based on user, device, or environment:
`ts
// feature-flags.config.ts
export default defineFeatureFlags((context) => ({
// Role-based
adminPanel: context?.user?.role === 'admin',
// Environment-based
devTools: process.env.NODE_ENV === 'development',
// Device-based
mobileUI: context?.device?.isMobile ?? false,
// Gradual rollout (20% of users)
newFeature: {
enabled: true,
variants: [
{ name: 'old', weight: 80, value: false },
{ name: 'new', weight: 20, value: true }
]
}
}))
`
Populate context in server middleware:
`ts
// server/middleware/user-context.ts
export default defineEventHandler(async (event) => {
const user = await getUserFromSession(event)
if (user) {
event.context.user = {
id: user.id,
role: user.role
}
}
})
`
📖 API Reference
$3
`ts
const {
flags, // Ref
isEnabled, // (flag: string, variant?: string) => boolean
getVariant, // (flag: string) => string | undefined
getValue, // (flag: string) => any
getFlag, // (flag: string) => ResolvedFlag | undefined
fetch // () => Promise
} = useFeatureFlags()
`
$3
`ts
const {
flags, // ResolvedFlags
isEnabled, // (flag: string, variant?: string) => boolean
getVariant, // (flag: string) => string | undefined
getValue, // (flag: string) => any
getFlag // (flag: string) => ResolvedFlag | undefined
} = getFeatureFlags(event)
`
$3
`vue
Content
Variant A content
`
✅ Validation
Validate flags at build time:
`ts
// 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
})
``