Reference

TypeScript types

All public types are exported from the package root:

import type {
  FeatureTogglesOptions,
  FeatureProvider,
  FlagSource,
  FlagValue,
  FlagDefinition,
  FlagName,
  FlagMeta,
  FlagSchedule,
  SetFlagOptions,
  WatchFlagOptions,
  LiveUpdatesOptions,
  FeatureFlagNames,
} from 'vue-feature-toggles'

// FlagValue is boolean OR a variant string
type FlagValue = boolean | string

// A flags-option entry is either a plain value, or a percentage-rollout definition
type FlagDefinition = FlagValue | { value: FlagValue; rollout: number }

// All flag source tiers
type FlagSource =
  'url' | 'runtime' | 'rules' | 'loader' | 'live' | 'static' | 'schedule' | 'default'

interface FlagMeta {
  description?: string
  owner?: string
  addedAt?: string // ISO date string, e.g. '2025-03-01'
  ticket?: string
}

interface FlagSchedule {
  from?: string // ISO date — flag is forced off before this date
  to?: string // ISO date — flag is forced off after this date
}

interface SetFlagOptions {
  persist?: boolean // save to localStorage — works for both setFlag() and setVariant()
}

interface WatchFlagOptions {
  debounce?: number // ms — debounce the callback
  immediate?: boolean // call the callback once immediately with the current value
}

interface LiveUpdatesOptions {
  type: 'sse' | 'websocket'
  url: string
  reconnectDelay?: number // ms, default: 3000
}

// FlagName resolves to a union of your declared flag names when FeatureFlagNames is augmented,
// or falls back to string when it is empty.
type FlagName = keyof FeatureFlagNames extends never ? string : keyof FeatureFlagNames

Type safety

Extend the built-in FeatureFlagNames interface to get autocomplete and compile-time errors on flag names everywhere — useFeature, setFlag, isEnabled, <Feature name="...">, etc.

// feature-flags.d.ts (or any .d.ts file in your project)
declare module 'vue-feature-toggles' {
  interface FeatureFlagNames {
    newDashboard: true
    betaSearch: true
    darkMode: true
  }
}

useFeature('newDashbord') // TS error: Argument of type '"newDashbord"' is not assignable
useFeature('newDashboard') // ✔

Exports

// Main entry — vue-feature-toggles
import {
  FeatureToggles, // plugin for app.use()
  Feature, // <Feature> component
  FeatureVariant, // <FeatureVariant> component
  FeatureDevTools, // DevTools overlay component
  vFeature, // v-feature directive
  useFeature, // composable
  useFeatureVariant, // composable for variant flags
  useFeatureProvider, // low-level composable
  FEATURE_PROVIDER_KEY, // injection key, for custom provide()/inject() setups
  serializeFlags, // SSR helper
} from 'vue-feature-toggles'

import type {
  FeatureTogglesOptions,
  FeatureProvider,
  FlagSource,
  FlagValue,
  FlagDefinition,
  FlagName,
  FlagMeta,
  FlagSchedule,
  SetFlagOptions,
  WatchFlagOptions,
  LiveUpdatesOptions,
  FeatureFlagNames,
} from 'vue-feature-toggles'

// Testing utilities (excluded from production bundle)
import {
  createTestFeatureProvider,
  withFeatures,
  setTestFlag,
  resetTestProvider,
} from 'vue-feature-toggles/testing'

// Storybook decorator (excluded from production bundle)
import { withFeatureToggles } from 'vue-feature-toggles/storybook'

// Adapter loaders (LaunchDarkly, Unleash, Flagsmith)
import { launchDarklyLoader, unleashLoader, flagsmithLoader } from 'vue-feature-toggles/adapters'

// Vite plugin — strips <FeatureDevTools> in production builds
import { featureTogglesPlugin } from 'vue-feature-toggles/vite'

// Nuxt module
// modules: ['vue-feature-toggles/nuxt']

Architecture

vue-feature-toggles/
├── src/
│   ├── core/
│   │   ├── FeatureProvider.ts   # createFeatureProvider() — the whole provider as one factory
│   │   │                        #   function: merges the priority chain (url → runtime → rules
│   │   │                        #   → loader → static → schedule → default), then applies
│   │   │                        #   dependency forcing; exposes every FeatureProvider method
│   │   ├── rollout.ts           # hashToFloat() (FNV-1a), resolveFlagDef() — percentage rollout
│   │   ├── persistence.ts       # localStorage read/write for runtime overrides + named profiles
│   │   ├── live-updates.ts      # setupLiveUpdates() — SSE / WebSocket, auto-reconnect,
│   │   │                        #   tags pushed flags with the 'live' FlagSource
│   │   ├── helpers.ts           # isFlagTruthy, parseUrlValue, parseVarValue
│   │   └── types.ts             # FeatureTogglesOptions, FeatureProvider, and every public type
│   ├── components/
│   │   ├── feature.vue          # <Feature>
│   │   ├── feature-variant.vue  # <FeatureVariant>
│   │   └── feature-dev-tools.vue# <FeatureDevTools> — built from internal src/ui/*.vue parts
│   ├── directives/
│   │   └── vFeature.ts          # v-feature
│   ├── composables/
│   │   ├── useFeature.ts        # useFeature, useFeatureVariant
│   │   └── useFeatureProvider.ts# useFeatureProvider
│   ├── ui/                      # FeatureDevTools's own sub-components — internal, not exported
│   ├── plugin.ts                # FeatureToggles — the app.use() entry point
│   ├── devtools.ts              # setupVueDevtools() — Vue DevTools browser-extension hookup,
│   │                            #   invoked automatically by plugin.ts in dev mode, not exported
│   ├── ssr.ts                   # serializeFlags()
│   ├── testing.ts               # /testing entry point
│   ├── storybook.ts             # /storybook entry point
│   ├── adapters.ts              # /adapters entry point
│   ├── vite.ts                  # /vite entry point
│   └── index.ts                 # root entry point
├── nuxt/
│   ├── module.ts                # Nuxt 3 module (defineNuxtModule)
│   └── runtime/
│       └── plugin.ts            # Nuxt runtime plugin — global registration + SSR payload handling
└── bin/
    └── cli.js                   # list / check / stale subcommands

FeatureProvider.ts is a single flat factory function, not a set of manager classes — flag resolution is one computed() that layers URL overrides, runtime overrides, rules, the loader's result, static flags, and the schedule check on top of each other in priority order, then applies dependency forcing. See priority order for the exact chain.

Bundle size & peer dependencies

Entry point	Peer deps	Notes
`vue-feature-toggles`	`vue ^3.0` (required)	Core — plugin, components, directive, composables
`vue-feature-toggles/testing`	`vue ^3.0`	Test helpers only; excluded from prod bundle
`vue-feature-toggles/storybook`	`vue ^3.0`	Storybook decorator only; excluded from prod
`vue-feature-toggles/adapters`	`vue ^3.0`	LaunchDarkly, Unleash, Flagsmith loaders
`vue-feature-toggles/vite`	none declared — needs whatever `vite` your project already uses	Vite transform plugin
`vue-feature-toggles/nuxt`	`vue ^3.0`, `@nuxt/kit ≥3.0` (optional peer)	Nuxt 3 module

The package ships as tree-shakeable ESM (dist/*.js) and CommonJS (dist/*.cjs), with full type declarations for every entry point. @vue/devtools-api ≥7.0 (optional peer) is loaded dynamically for the DevTools integration and silently skipped when the package is absent or when Vue DevTools are closed.

License

MIT

Reference ​

TypeScript types ​

Type safety ​

Exports ​

Architecture ​

Bundle size & peer dependencies ​