Nuxt Module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-feature-toggles/nuxt'],

  featureToggles: {
    flags: { newDashboard: true, betaSearch: false },
    urlOverrides: true,
    urlPrefix: 'feature',
    defaultValue: false,
    reloadInterval: 0,
    userId: currentUser.id,
    schedule: { holidayBanner: { from: '2025-12-01', to: '2025-12-31' } },
    variables: { newCheckout: { maxItems: 5 } },
    meta: { newDashboard: { owner: 'alice', addedAt: '2025-03-01' } },
    expiry: { betaBanner: '2025-06-01' },
    groups: { beta: ['betaSearch'] },
    dependencies: { aiSuggestions: ['newSearch'] },
    liveUpdates: { type: 'sse', url: '/api/flags/stream' },
  },
})

• <Feature>, <FeatureVariant>, and v-feature are registered globally
• SSR hydration via nuxtApp.payload is handled automatically — no ssrState config needed
• $featureToggles is injected into nuxtApp

// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { $featureToggles } = nuxtApp
  console.log($featureToggles.flags.value)
})

All options accepted by the Vue plugin work in nuxt.config.ts except loader and rules — see below.

Custom loader & rules with Nuxt

loader and rules are functions and cannot be serialized into nuxt.config.ts (Nuxt's public runtime config is JSON-serialized to the client) — the module's own TypeScript type deliberately excludes both, the same way it excludes ssrState. Register them via a plugin instead:

// plugins/feature-toggles.ts
import { FeatureToggles } from 'vue-feature-toggles'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(FeatureToggles, {
    loader: async () => {
      return $fetch('/api/flags')
    },
    rules: {
      darkMode: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
    },
    urlOverrides: true,
  })
})