Provider API

useFeatureProvider() — full access to the provider internals, for imperative flag control, observability, and advanced integrations.

function useFeatureProvider(): FeatureProvider

import { useFeatureProvider } from 'vue-feature-toggles'

const provider = useFeatureProvider()

Throws if called outside a component tree where the FeatureToggles plugin has been installed.

Reactive state

Property	Type	Description
flags	Ref<Record<string, FlagValue>>	All current, fully-resolved flag values
isLoading	Ref<boolean>	true while loader is running
isReady	Ref<boolean>	true after the first resolution completes

Control methods

isEnabled(name: string): boolean
setFlag(name: string, value: boolean, options?: SetFlagOptions): void
resetFlag(name: string): void
resetAll(): void
reload(): Promise<void>
getFlagSource(name: string): FlagSource

getFlagSource() returns which layer of the priority chain currently decides the flag: 'url' | 'runtime' | 'rules' | 'loader' | 'static' | 'schedule' | 'default'.

Variant methods

getVariant(name: string): string
setVariant(name: string, variant: string, options?: SetFlagOptions): void

setVariant() accepts the same { persist: true } option as setFlag() — variant overrides can be persisted to localStorage exactly like boolean ones.

Variables

Variables are scoped to a flag and share its priority chain. They can be overridden via URL or setVariable.

app.use(FeatureToggles, {
  flags: { newCheckout: true },
  variables: {
    newCheckout: {
      maxItems: 5,
      theme: 'dark',
      buttonLabel: 'Place order',
    },
  },
})

const { getVariable, setVariable } = useFeatureProvider()

const maxItems = getVariable<number>('newCheckout', 'maxItems') // Ref<number>
const theme = getVariable<string>('newCheckout', 'theme') // Ref<string>

setVariable('newCheckout', 'maxItems', 10)

URL override: ?feature-var:newCheckout:maxItems=10

Groups

const { setGroup, resetGroup, isGroupEnabled } = useFeatureProvider()

setGroup('beta', false) // disable all beta flags
setGroup('maintenance', true)
isGroupEnabled('beta') // true only when ALL flags in the group are enabled

<Feature group="beta"><BetaLabel /></Feature>

Dependencies

If a required flag is disabled, the dependent flag is forced off automatically.

app.use(FeatureToggles, {
  flags: { aiSuggestions: true, newSearch: false },
  dependencies: { aiSuggestions: ['newSearch'] },
})
// aiSuggestions is forced false because newSearch is false

const { getDependencyViolations } = useFeatureProvider()
// → { aiSuggestions: ['newSearch'] }

A warning is printed in the dev console when a violation occurs.

Profiles

saveProfile(name: string, flags: Record<string, FlagValue>): void
loadProfile(name: string): void  // 'default' → resetAll()
listProfiles(): string[]

Named sets of overrides stored in localStorage — useful for QA, demos, and design reviews.

const { saveProfile, loadProfile, listProfiles } = useFeatureProvider()

saveProfile('demo-mode', {
  newDashboard: true,
  betaSearch: true,
  maintenanceMode: false,
})

loadProfile('demo-mode') // applies all flags from the profile as runtime overrides
loadProfile('default') // resets to original values (calls resetAll)

listProfiles() // → ['demo-mode']

The <FeatureDevTools> panel shows a profile dropdown when profiles exist.

Persistence

isPersisted(name: string): boolean
clearPersistedFlags(): void

Metadata & expiry

getFlagMeta(name: string): FlagMeta | undefined
isExpired(name: string): boolean

SSR

serialize(): Record<string, FlagValue>

Returns the fully-resolved flag map for embedding in server-rendered HTML — see SSR / Hydration.

Subscription

watchFlag(name: string, callback: (value, oldValue) => void, options?: WatchFlagOptions): WatchStopHandle

const stop = watchFlag('darkMode', (value, oldValue) => {
  applyTheme(value ? 'dark' : 'light')
})
// later: stop()

Rollout & schedule introspection

getRollout(name: string): number | undefined
getSchedule(name: string): FlagSchedule | undefined
isScheduleActive(name: string): boolean

See Rollout & Scheduling for how these are configured.

Introspection

listVariables(flagName: string): string[]
listGroups(): Record<string, string[]>

Common patterns

// Emergency kill-switch
setFlag('newPaymentFlow', false)

// Route guard
router.beforeEach((to) => {
  const { isEnabled } = useFeatureProvider()
  if (to.meta.feature && !isEnabled(to.meta.feature as string)) {
    return { name: 'NotFound' }
  }
})