VueCraft NPM

Plugin & Options ​

Registration ​

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')

Registers the <Feature> and <FeatureVariant> components and the v-feature directive globally, and provides the FeatureProvider that useFeature() and friends read from. In dev mode it also auto-registers the Vue DevTools integration if @vue/devtools-api is installed. Using Nuxt 3? See the Nuxt module instead — same options, different registration.

Options ​

flags ​

Record<string, FlagDefinition> · default: {}

Static flag values. A value is either a plain boolean/variant string, or { value, rollout } for a percentage-bucketed rollout (see Rollout & Scheduling).

ts
flags: {
  newDashboard: true,           // boolean flag
  checkoutFlow: 'v2',           // variant flag
  newSearch: { value: true, rollout: 0.2 }, // 20% rollout
}

loader ​

() => Promise<Record<string, FlagValue>> · default: —

Async function that fetches flags from a backend. Takes priority over flags but below rules/runtime/URL overrides.

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

reloadInterval ​

number · default: 0 (disabled)

Poll interval for loader, in milliseconds.

urlOverrides ​

boolean · default: true in dev, false in production

Allow ?feature:flagName=true-style query params to override flags without a page reload.

urlPrefix ​

string · default: 'feature'

Query-param prefix used by URL overrides (?<urlPrefix>:flagName=value).

defaultValue ​

boolean · default: false

Value returned for flag names that were never configured anywhere.

userId ​

string · default: —

Stable per-user identifier used to deterministically bucket { value, rollout } flags — the same userId always lands on the same side of a rollout. See Rollout & Scheduling.

schedule ​

Record<string, FlagSchedule> · default: —

Activates or deactivates a flag automatically between two ISO dates. See Rollout & Scheduling.

ssrState ​

Record<string, FlagValue> · default: —

Server-resolved flag snapshot, passed to the client to prevent hydration mismatches. See SSR / Hydration.

liveUpdates ​

LiveUpdatesOptions · default: —

Push flag changes from the server over SSE or WebSocket. See Live updates.

variables ​

Record<string, Record<string, unknown>> · default: —

Values scoped to a flag, read via getVariable(). Share the flag's own priority chain and can be overridden via URL or setVariable().

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

groups ​

Record<string, string[]> · default: —

Named sets of flags that can be toggled together via setGroup()/isGroupEnabled().

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

dependencies ​

Record<string, string[]> · default: —

Forces a flag off automatically when any flag it depends on is disabled.

ts
dependencies: {
  aiSuggestions: ['newSearch'], // aiSuggestions is forced off if newSearch is off
}

rules ​

Record<string, () => boolean> · default: —

Contextual rules — reactive functions evaluated as a flag source, priority below URL overrides/setFlag(), above loader/static flags.

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

meta ​

Record<string, FlagMeta> · default: —

Descriptive metadata per flag (description, owner, addedAt, ticket), surfaced in <FeatureDevTools> and the CLI.

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

expiry ​

Record<string, string> · default: —

ISO date per flag — after this date the flag is treated as expired (returns defaultValue, warns in the dev console).

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