A utility for managing design tokens with support for hierarchical collections, aliases, and token resolution across your application’s design system. Inspired by Design Tokens↗ .
The useTokens composable allows you to define a collection of design tokens, which can be primitive values or aliases that reference other tokens. It provides a context for resolving these tokens, making it easy to access design values throughout your application.
ts import { useTokens } from '@vuetify/v0' // Default behavior (depth = Infinity): fully flatten nested objects const tokens = useTokens ({ color: { primary: '#3b82f6' , secondary: '#64748b' , info: '{primary}' }, radius: { sm: '4px' , md: '8px' , }, }) tokens. resolve ( 'color.primary' ) // '#3b82f6' tokens. resolve ( 'color.info' ) // '#3b82f6' (alias resolved) tokens. resolve ( 'radius.md' ) // '8px' const features = useTokens ({ dark: true , rtl: { value: true , variation: 'toggle' }, }, { flat: true }) // With flat: true, nested objects are kept as-is at their base id features. resolve ( 'rtl' ) // { value: true, variation: 'toggle' } useTokens extends useRegistry and powers token-based systems:
Diagram Click outside or press Escape to close
View standalone → The following API details are for the
useTokens composable.
(tokens?: TokenCollection, options?: TokenOptions) => ECreates a new token instance.
Show code example
(_options: TokenContextOptions) => ContextTrinity<E>Creates a new token context.
Show code example
(namespace?: string) => EReturns the current tokens instance.
Show code example
booleanEnable event emission for registry operations
Default: false
booleanWhether to flatten nested token structures.
Default: false
stringAn optional prefix to prepend to each token ID during registration.
ReadonlyMap<ID, Z>The collection of tickets in the registry
numberThe number of tickets in the registry
Show code example
() => voidClear the entire registry
Show code example
(id: ID) => booleanCheck if a ticket exists by ID
Show code example
() => ID[]Get all registered IDs
Show code example
(value: unknown) => ID[] | undefinedBrowse for an ID(s) by value
Show code example
(index: number) => ID | undefinedlookup a ticket by index number
Show code example
(id: ID) => Z | undefinedGet a ticket by ID
Show code example
(id: ID, ticket?: Partial<Z>) => ZUpdate or insert a ticket by ID
Show code example
() => Z[]Get all values of registered tickets
Show code example
() => [ID, Z][]Get all entries of registered tickets
Show code example
(ticket?: Partial<Z>) => ZRegister a new ticket
Show code example
(id: ID) => voidUnregister an ticket by ID
Show code example
() => voidReset the index directory and update all tickets
Show code example
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefinedSeek for a ticket based on direction and optional predicate
Show code example
(event: string, cb: RegistryEventCallback) => voidListen for registry events
Show code example
(event: string, cb: RegistryEventCallback) => voidStop listening for registry events
Show code example
(event: string, data: unknown) => voidEmit an event with data
Show code example
() => voidClears the registry and removes all listeners
Show code example
(registrations: Partial<Z>[]) => Z[]Onboard multiple tickets at once
Show code example
(ids: ID[]) => voidOffboard multiple tickets at once
Show code example
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
Show code example
(token: unknown) => token is stringChecks if a token is an alias
Show code example
(token: string | TokenAlias) => unknown | undefinedResolves a token or alias to its value.
Show code example
