nuxt-feature-flags-module

Lightweight, environment-based feature flag system for Nuxt 3 — made for developers who need dynamic feature control in routes, components, and APIs.

Features

• 🚫 Hide incomplete features in production environments to prevent accidental exposure
• 🧪 Enable alpha/beta features for staging, preview, or development environments
• 🔐 Limit access to specific APIs by feature flag in server handlers
• 🎯 Roll out features to internal QA teams without branching or releases
• 📆 Schedule feature launches for specific environments or timeframes
• 🕵️‍♀️ Detect undeclared feature flags at build time with configurable validation and precise file context

Planned Features

• 🧩 Nuxt DevTools integration with a Feature Flag Explorer and Environment Switcher
• 🔄 Dynamic feature flag updates without server restarts through a remote config service
• 📊 A/B testing support for feature flags
• 📈 Analytics for feature flag usage
• 🧍‍♂️ Show features only for specific users (e.g., staff-only UIs, admin panels etc.)
• 🧬 Environment inheritance which lets environments inherit feature flags from others
• 💡 Flag descriptions / metadata for better documentation, DevTools tooltips, or internal usage notes
• 🛠 Programmatic overrides to toggle or override feature flags dynamically at runtime (e.g., per user or session)

Quick Setup

Install the module to your Nuxt application with one command:

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:

export default defineNuxtConfig({
  modules: ['nuxt-feature-flags-module'],
  featureFlags: {
    environment: process.env.FEATURE_ENV || 'development',
    environments: {
      development: ['yourFeature1', 'yourFeature2'],
      staging: ['yourFeature1'],
      production: []
    }
  }
})

Use in your app:

<template>
  <button v-feature="'yourFeature2'">Try Feature 2</button>
</template>

Or via composable:

const { isEnabled } = useFeatureFlag()

if (isEnabled('yourFeature1')) {
  // do something
}

Or in your server API:

export default defineEventHandler((event) => {
  if (!isFeatureEnabled('yourFeature2', event)) {
    return sendError(event, createError({ statusCode: 403, message: 'Feature 2 is disabled' }))
  }

  return { message: 'Feature unlocked 🎉' }
})

Contribution

Local development

# 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

License

This project is licensed under the MIT License.