useFeatures

Manage feature flags and simple variations across your app. Register features, toggle them, and query a variation value for A/B-style behavior.

Usage

Install the Features plugin once, then access the context anywhere via createFeatures.

import { createApp } from 'vue'
import { createFeaturesPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createFeaturesPlugin({
    features: {
      analytics: true,
      debug_mode: false,
      notifications: false,
      search: { $value: true, $variation: 'v2' },
    },
  })
)

app.mount('#app')

Now in any component, access current feature flags and variations:

<script lang="ts" setup>
  import { useFeatures } from '@vuetify/v0'

  const features = useFeatures()
</script>

<template>
  <div>
    <p>Analytics: {{ features.get('analytics') }}</p>
    <p>Debug Mode: {{ features.get('debug_mode') }}</p>
    <p>Notifications: {{ features.get('notifications') }}</p>
    <p>Search Variation: {{ features.variation('search', 'v1') }}</p>
  </div>
</template>

Optionally register features at runtime:

<script lang="ts" setup>
  import { useFeatures } from '@vuetify/v0'

  const features = useFeatures()

  // Register at runtime
  features.register({ id: 'beta', value: false })

  // Enable/disable via selection helpers
  features.select('beta')
  features.unselect('analytics')
</script>

API

Extensions

useFeatures

• Type

  interface FeatureTicket extends GroupTicket {
    value: TokenValue // string | number | boolean | TokenAlias
  }
  
  interface TokenAlias<T = unknown> {
    $value: T
    $variation?: any
    $type?: string
    $description?: string
    $extensions?: Record<string, unknown>
    $deprecated?: boolean | string
    [key: string]: unknown
  }
  
  interface FeatureContext<Z extends FeatureTicket = FeatureTicket> extends GroupContext<Z> {
    variation (id: string, fallback?: any): any
  }
  
  interface FeaturePluginOptions {
    features?: Record<ID, boolean | TokenCollection>
  }
  
  interface FeatureOptions extends FeaturePluginOptions {}

• Details
  • value: Can be a primitive (string, number, boolean) or a TokenAlias object following the W3C Design Tokens format with $value, $variation, and other metadata fields.
  • variation (id: string, fallback?: any): any: Get the variation value for a feature. Looks for $variation property in token objects, or returns the provided fallback if not set.

register

• Type

  function register (item?: Partial<Z>): Z

• Details Augments the default register method from useRegistry→ to auto-select features that are registered with a truthy value. If a feature is registered with value: true, { value: true }, or { $value: true }, it will be automatically selected.

variation

• Type

  function variation (id: string, fallback?: any): any

• Details Get the variation value for a feature. If the feature is not found or has no variation, returns the provided fallback value (or null if no fallback is provided).

• Example

  // main.ts
  import { createApp } from 'vue'
  import { createFeaturesPlugin } from '@vuetify/v0'
  import App from './App.vue'
  
  const app = createApp(App)
  
  app.use(
    createFeaturesPlugin({
      features: {
        'new_ui': { $value: true, $variation: 'A' },
        'old_ui': false,
      },
    })
  )

  <!-- Component.vue -->
  <script lang="ts" setup>
    import { useFeatures } from '@vuetify/v0'
  
    const features = useFeatures()
  
    features.variation('new_ui', 'B') // 'A'
    features.variation('old_ui', 'default') // 'default'
    features.variation('non_existent', 'fallback') // 'fallback'
    features.variation('non_existent') // null
  </script>