VueCraft NPM

Плагин и опции ​

Регистрация ​

ts
// main.ts
import { createApp } from 'vue'
import { FeatureToggles } from 'vue-feature-toggles'
import App from './App.vue'

const app = createApp(App)

app.use(FeatureToggles, {
  flags: { newDashboard: true, checkoutFlow: 'v2' },
})

app.mount('#app')

Регистрирует глобально компоненты <Feature> и <FeatureVariant> и директиву v-feature, а также предоставляет FeatureProvider, из которого читают useFeature() и подобные. В dev-режиме также автоматически регистрирует интеграцию с Vue DevTools, если установлен @vue/devtools-api. Используете Nuxt 3? См. модуль Nuxt — те же опции, другая регистрация.

Опции ​

flags ​

Record<string, FlagDefinition> · по умолчанию: {}

Статические значения флагов. Значение — либо обычный boolean/строка варианта, либо { value, rollout } для процентного раската (см. Постепенный раскат и расписание).

ts
flags: {
  newDashboard: true,           // булев флаг
  checkoutFlow: 'v2',           // вариантный флаг
  newSearch: { value: true, rollout: 0.2 }, // раскат на 20%
}

loader ​

() => Promise<Record<string, FlagValue>> · по умолчанию: —

Асинхронная функция, получающая флаги с бэкенда. Имеет приоритет над flags, но ниже правил/runtime/URL-переопределений.

ts
loader: async () => {
  const res = await fetch('/api/feature-flags')
  return res.json()
}

reloadInterval ​

number · по умолчанию: 0 (отключено)

Интервал поллинга для loader, в миллисекундах.

urlOverrides ​

boolean · по умолчанию: true в dev, false в продакшене

Разрешить query-параметры вида ?feature:flagName=true переопределять флаги без перезагрузки страницы.

urlPrefix ​

string · по умолчанию: 'feature'

Префикс query-параметра, используемый URL-переопределениями (?<urlPrefix>:flagName=value).

defaultValue ​

boolean · по умолчанию: false

Значение, возвращаемое для имён флагов, которые нигде не были настроены.

userId ​

string · по умолчанию: —

Стабильный идентификатор пользователя, используемый для детерминированного распределения флагов { value, rollout } — один и тот же userId всегда попадает на одну и ту же сторону раската. См. Постепенный раскат и расписание.

schedule ​

Record<string, FlagSchedule> · по умолчанию: —

Автоматически активирует или деактивирует флаг между двумя ISO-датами. См. Постепенный раскат и расписание.

ssrState ​

Record<string, FlagValue> · по умолчанию: —

Серверный снимок флагов, передаваемый клиенту для предотвращения расхождения при гидратации. См. SSR / гидратация.

liveUpdates ​

LiveUpdatesOptions · по умолчанию: —

Отправка изменений флагов с сервера через SSE или WebSocket. См. Живые обновления.

variables ​

Record<string, Record<string, unknown>> · по умолчанию: —

Значения, привязанные к флагу, читаемые через getVariable(). Разделяют собственную цепочку приоритетов флага и могут быть переопределены через URL или setVariable().

ts
variables: {
  newCheckout: { maxItems: 5, theme: 'dark' },
}

groups ​

Record<string, string[]> · по умолчанию: —

Именованные наборы флагов, которые можно переключать вместе через setGroup()/isGroupEnabled().

ts
groups: {
  beta: ['betaSearch', 'newDashboard'],
  maintenance: ['maintenanceMode', 'readOnlyBanner'],
}

dependencies ​

Record<string, string[]> · по умолчанию: —

Автоматически принудительно выключает флаг, когда любой флаг, от которого он зависит, отключён.

ts
dependencies: {
  aiSuggestions: ['newSearch'], // aiSuggestions принудительно выключен, если newSearch выключен
}

rules ​

Record<string, () => boolean> · по умолчанию: —

Контекстные правила — реактивные функции, вычисляемые как источник флага, приоритет ниже URL-переопределений/setFlag(), выше loader/статических флагов.

ts
rules: {
  darkMode: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
}

meta ​

Record<string, FlagMeta> · по умолчанию: —

Описательные метаданные на флаг (description, owner, addedAt, ticket), отображаемые в <FeatureDevTools> и CLI.

ts
meta: {
  newDashboard: { description: 'New UI', owner: 'alice', addedAt: '2025-03-01', ticket: 'PROJ-42' },
}

expiry ​

Record<string, string> · по умолчанию: —

ISO-дата на флаг — после этой даты флаг считается истёкшим (возвращает defaultValue, предупреждает в консоли разработчика).

ts
expiry: {
  christmasBanner: '2025-01-10',
}