useFeatureProvider & Advanced Flags

useFeatureProvider

Full access to the provider internals — use for imperative flag control, observability, and advanced integrations.

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

const {
  // State
  flags, // Ref<Record<string, FlagValue>> — all current flag values
  isLoading, // Ref<boolean> — true while loader is running
  isReady, // Ref<boolean> — true after first load

  // Boolean flags
  isEnabled, // (name) => boolean
  setFlag, // (name, value, options?) => void
  resetFlag, // (name) => void
  resetAll, // () => void
  reload, // () => Promise<void>
  getFlagSource, // (name) => FlagSource

  // Variant flags
  getVariant, // (name) => string
  setVariant, // (name, variant) => void

  // Variables
  getVariable, // <T>(flagName, varName) => Ref<T>
  setVariable, // (flagName, varName, value) => void

  // Groups
  setGroup, // (groupName, value) => void
  resetGroup, // (groupName) => void
  isGroupEnabled, // (groupName) => boolean

  // Dependencies
  getDependencyViolations, // () => Record<string, string[]>

  // Profiles
  saveProfile, // (name, flags) => void
  loadProfile, // (name) => void  ('default' → resetAll)
  listProfiles, // () => string[]

  // Persistence
  isPersisted, // (name) => boolean
  clearPersistedFlags, // () => void

  // Metadata & expiry
  getFlagMeta, // (name) => FlagMeta | undefined
  isExpired, // (name) => boolean

  // SSR
  serialize, // () => Record<string, FlagValue>

  // Subscriptions
  watchFlag, // (name, callback, options?) => WatchStopHandle

  // Rollout introspection
  getRollout, // (name) => number | undefined
  getSchedule, // (name) => FlagSchedule | undefined
  isScheduleActive, // (name) => boolean

  // Introspection
  listVariables, // (flagName) => string[]
  listGroups, // () => Record<string, string[]>
} = useFeatureProvider()

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

// React to a specific flag change
const stop = watchFlag('darkMode', (value, oldValue) => {
  applyTheme(value ? 'dark' : 'light')
})
// later: stop()

Feature 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

Flag groups

app.use(FeatureToggles, {
  groups: {
    beta: ['betaSearch', 'newDashboard', 'aiSuggestions'],
    maintenance: ['maintenanceMode', 'readOnlyBanner'],
  },
})

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>

Flag 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.