VueCraft NPM

Модуль Nuxt ​

ts
// 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> и v-feature регистрируются глобально
  • SSR-гидратация через nuxtApp.payload обрабатывается автоматически — конфигурация ssrState не нужна
  • $featureToggles внедряется в nuxtApp
ts
// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { $featureToggles } = nuxtApp
  console.log($featureToggles.flags.value)
})

Все опции, принимаемые плагином Vue, работают в nuxt.config.ts кроме loader и rules — см. ниже.

Пользовательский загрузчик и правила с Nuxt ​

loader и rules — это функции, и они не могут быть сериализованы в nuxt.config.ts (публичный runtime-конфиг Nuxt сериализуется в JSON для клиента) — собственный тип модуля намеренно исключает оба, точно так же, как исключает ssrState. Регистрируйте их через плагин:

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