Feature Toggles

npm install vue-feature-toggles@latest

01 — Назначение

Когда это пригодится

Код новой функции готов раньше, чем готовы маркетинг, QA или сам продакт-менеджер её включать — фича-флаг разделяет момент деплоя и момент, когда функция реально становится видна пользователям.

Новую функцию включают не всем сразу

Сначала функцию видит 5% пользователей, потом 25%, потом все — если что-то пошло не так, откатить проще, чем разгребать последствия после полного релиза.

Нужно сравнить два варианта фичи, а не включить/выключить

Часть пользователей видит старую кнопку оформления заказа, часть — новую, и конверсия сравнивается по факту использования, а не по мнению команды, какой вариант лучше.

Тестировщику нужно быстро переключаться между сценариями

Один набор функций включён для проверки нового онбординга, другой — для регрессии старого поведения. Вместо того чтобы вручную щёлкать десяток переключателей, весь набор сохраняется и включается одной кнопкой.

Функцию нужно выключить прямо сейчас, без нового деплоя

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

02 — Фичи

Коротко о главном

Булевы и многовариантные флаги

Управляйте функциями через простые boolean-флаги или строковые варианты для A/B-тестов и поэтапных раскаток. Статические флаги, асинхронная загрузка с бекенда, периодический опрос и приоритетная цепочка (URL → runtime → правила → загрузчик → статика → defaultValue) дают полный контроль над логикой.

Контекстные правила, URL и локальное хранилище

Реактивные правила на основе любых условий (время, куки, prefers-color-scheme) автоматически обновляют флаги. URL-параметры позволяют переопределять флаги без перезагрузки страницы, а persist-флаги сохраняются в localStorage. Всё это работает вместе, давая гибкость на всех уровнях.

Группы, зависимости и профили

Объединяйте флаги в группы для массового включения/отключения. Настраивайте зависимости, чтобы один флаг автоматически отключался, если другой выключен. Сохраняйте именованные наборы оверрайдов как профили для быстрого переключения между сценариями (демо, QA).

Удобный API для компонентов и логики

Используйте декларативный компонент <Feature> со слотами default/fallback/loading, директиву v-feature для v-show-стиля и композабл useFeature для реактивной логики. Многовариантные флаги поддерживаются через <FeatureVariant> и useFeatureVariant. Все инструменты типобезопасны.

DevTools, CLI и готовые интеграции

Встроенная плавающая панель DevTools для инспекции и управления флагами, CLI для анализа флагов в коде (list/check/stale), адаптеры для LaunchDarkly, Unleash и Flagsmith. Nuxt-модуль с SSR-гидрацией, Storybook-декоратор и Vite-плагин для удаления DevTools в продакшене.

Раскатка по проценту и планирование по датам

Задавайте флагу объект { value, rollout } — он включится только для указанного процента пользователей, стабильно определяемого хешем идентификатора, а не случайно. Планируйте активацию флагов на конкретные даты, а метаданные и срок действия помогут находить устаревшие флаги.

03 — Быстрый пример

Как это работает

Флаг решается по контексту, а не жёстко зашит

Правила — обычные реактивные функции: тёмная тема по системным настройкам, виджет чата по времени суток, доступ разработчику по куке. Их всё ещё можно переопределить URL-параметром или setFlag().

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

app.use(FeatureToggles, {
  rules: {
    darkMode: () => window.matchMedia('(prefers-color-scheme: dark)').matches,
    liveChatWidget: () => {
      const h = new Date().getHours()
      return h >= 9 && h < 18
    },
    devFeatures: () => document.cookie.includes('internal=1'),
  },
})

// Rules are reactive functions, re-evaluated whenever their inputs change —
// still overridable by a URL param or setFlag() at runtime.

A/B-тест без единого v-if

checkoutFlow хранит строковый вариант, а не булево значение — <FeatureVariant> сам рендерит нужный слот, а переключение через ?feature:checkoutFlow=v2 работает без перезагрузки.

CheckoutSwitch.vue
<script setup lang="ts">
import { useFeatureVariant } from 'vue-feature-toggles'

const variant = useFeatureVariant('checkoutFlow') // Ref<string>
</script>

<template>
  <FeatureVariant name="checkoutFlow">
    <template #v1><CheckoutV1 /></template>
    <template #v2><CheckoutV2 /></template>
    <template #fallback><CheckoutLegacy /></template>
  </FeatureVariant>
</template>

<!-- URL overrides work identically: ?feature:checkoutFlow=v2 -->

Флаги меняются на лету — без перезагрузки и опроса

Сервер пушит { betaSearch: true } через SSE или WebSocket, и все компоненты с этим флагом перерисовываются мгновенно — polling не нужен.

live-updates.ts
import { FeatureToggles } from 'vue-feature-toggles'

app.use(FeatureToggles, {
  loader: async () => fetch('/api/flags').then((r) => r.json()),
  liveUpdates: { type: 'sse', url: '/api/flags/stream' },
})

// The server pushes { "betaSearch": true }, and every component using that
// flag re-renders instantly — no polling, no page reload.

Начать знакомство →