Nuxt, Testing & Storybook

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,
    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)
})

Custom loader with Nuxt

The loader option is a function and cannot be serialized in nuxt.config. Use 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')
    },
    urlOverrides: true,
  })
})

Testing utilities

import {
  createTestFeatureProvider,
  withFeatures,
  setTestFlag,
  resetTestProvider,
} from 'vue-feature-toggles/testing'

Mount with flags

import { mount } from '@vue/test-utils'
import { withFeatures } from 'vue-feature-toggles/testing'

const wrapper = mount(
  MyComponent,
  withFeatures({
    newDashboard: true,
    betaSearch: false,
  }),
)

Full provider access in tests

import { createTestFeatureProvider } from 'vue-feature-toggles/testing'

const { install, provider } = createTestFeatureProvider({ newDashboard: true })

const wrapper = mount(MyComponent, {
  global: { plugins: [{ install }] },
})

provider.setFlag('newDashboard', false)
await nextTick()

Change flags mid-test

import { setTestFlag } from 'vue-feature-toggles/testing'

it('hides the component when flag is off', async () => {
  const wrapper = mount(MyComponent, withFeatures({ betaSearch: true }))
  expect(wrapper.find('[data-testid="beta"]').exists()).toBe(true)

  await setTestFlag('betaSearch', false) // awaits nextTick automatically
  expect(wrapper.find('[data-testid="beta"]').exists()).toBe(false)
})

Cleanup

import { resetTestProvider } from 'vue-feature-toggles/testing'

afterEach(() => resetTestProvider())

The vue-feature-toggles/testing entry point is excluded from the production bundle.

Storybook addon

// .storybook/preview.ts
import { withFeatureToggles } from 'vue-feature-toggles/storybook'

export const decorators = [
  withFeatureToggles({ betaSearch: false }), // global defaults
]

// MyComponent.stories.ts
export const WithBetaSearch: Story = {
  parameters: {
    featureToggles: {
      betaSearch: true,
      newDashboard: false,
    },
  },
}

Per-story parameters.featureToggles are merged on top of the global defaults. The vue-feature-toggles/storybook entry point is excluded from the production bundle.