Lightweight, environment-based feature flag system for Nuxt - made for developers who need dynamic feature control in routes, components, and APIs.
npm install nuxt-feature-flags-module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![npm downloads 18m][npm-downloads-18m-src]][npm-downloads-href]
[![License][license-src]][license-href]
Lightweight, environment-based feature flag system for Nuxt - made for developers who need dynamic feature control in routes, components, and APIs.
*) patterns
bash
npx nuxi module add nuxt-feature-flags-module
`
That's it! You can now use Nuxt Feature Flags in your Nuxt app ✨
Then define your feature flags in nuxt.config.ts:
`ts
export default defineNuxtConfig({
modules: ['nuxt-feature-flags-module'],
featureFlags: {
environment: process.env.FEATURE_ENV || 'development',
flagSets: {
development: ['yourFeature1', 'yourFeature2', 'yourFeature3', 'yourFeature4'],
staging: ['yourFeature1'],
production: []
}
}
})
`
$3
Feature flags can be organized with /-separated paths and enabled in bulk using *.
`ts
export default defineNuxtConfig({
modules: ['nuxt-feature-flags-module'],
featureFlags: {
environment: process.env.FEATURE_ENV || 'development',
flagSets: {
development: [
'solutions/*',
'staging/*',
'internal/experimental/ui'
],
staging: [
'solutions/company-portal/addons/sales',
'solutions/company-portal/addons/marketing',
'internal/experimental/ui'
],
production: [
'solutions/company-portal/addons/sales'
]
}
}
})
`
`ts
const { isEnabled } = useFeatureFlag()
if (isEnabled('solutions/company-portal/addons/sales')) {
// sales addon enabled
}
if (isEnabled('solutions/*')) {
// any solution-related flag is active
}
`
> [!CAUTION]
> Using * enables every flag and the validator will emit a warning. Reserve it for debugging scenarios.
Use in your app:
`html
`
Or via composable:
`ts
const { isEnabled, listFlags } = useFeatureFlag()
if (isEnabled('yourFeature2')) {
// do something
}
console.log(listFlags()) // returns ['yourFeature1', 'yourFeature2', 'yourFeature3', 'yourFeature4']
`
Or in your server API:
`ts
export default defineEventHandler((event) => {
if (!isFeatureEnabled('yourFeature3', event)) {
return sendError(event, createError({ statusCode: 403, message: 'Feature 3 is disabled' }))
}
return { message: 'Feature unlocked 🎉' }
})
`
Or guard entire pages via definePageMeta:
`html
`
Contribution
Local development
`bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release
``