Usage Examples - nicokempe/nuxt-feature-flags-module GitHub Wiki

This page shows practical examples of how you can use nuxt-feature-flags-module in real-world Nuxt 3 applications. From hiding unfinished features to running A/B tests, the module offers full flexibility.

🧪 Example 1: Hide Unfinished UI Components in Production

Use Case: You’re developing a new sidebar but don’t want it to be visible in production yet.

// nuxt.config.ts
featureFlags: {
  environment: process.env.FEATURE_ENV || 'development',
  flagSets: {
    development: ['newSidebar'],
    production: []
  }
}

<!-- components/Layout.vue -->
<template>
  <NewSidebar v-feature="'newSidebar'" />
</template>

🔐 Example 2: Restrict Server API Access by Feature

Use Case: Your backend exposes a new API route that should only be available in staging.

// server/api/v1/new-feature.ts
export default defineEventHandler((event) => {
  if (!isFeatureEnabled('newApiEndpoint', event)) {
    return sendError(event, createError({ statusCode: 403, message: 'Forbidden' }))
  }
  return { message: 'New API response' }
})

📆 Example 3: Schedule a Feature Launch by Date

Use Case: You want a new element to appear automatically on a specific date. Particularly suitable for events such as sales, Christmas, Halloween, Black Friday or Easter.

// nuxt.config.ts
flagSets: {
  production: [
    {
      name: 'promoBanner',
      activeFrom: '2025-07-01T00:00:00Z'
    }
  ]
}

<!-- PromoBanner.vue -->
<template>
  <Banner v-if="isEnabled('promoBanner')" />
</template>

<script setup lang="ts">
const { isEnabled } = useFeatureFlag()
</script>

🎯 Example 4: A/B Test Two Versions of a UI

Use Case: You’re testing two layout options to improve conversion.

// nuxt.config.ts
flagSets: {
  production: [
    {
      name: 'landingPageTest',
      variants: ['v1', 'v2'],
      distribution: [0.5, 0.5],
      persistence: 'cookie'
    }
  ]
}

<template>
  <LandingV1 v-feature="'landingPageTest:v1'" />
  <LandingV2 v-feature="'landingPageTest:v2'" />
</template>

🛠 Example 5: Disable Inactive Feature Routes Automatically

Use Case: A deprecated route should return 404 if the flag is disabled.

definePageMeta({
  middleware: ['feature-deprecatedEditor']
})

If deprecatedEditor is not in the current environment, the route returns 404.

🕵️‍♀️ Example 6: Catch Undeclared Feature Usage at Build Time

Use Case: A teammate used a new feature flag without declaring it.

// nuxt.config.ts
featureFlags: {
  ...,
  validation: {
    mode: 'error'
  }
}

During build, an error will be thrown with the file name, line, and column if a feature is used but not declared.