createQueue
A queue composable for managing time-based collections with automatic timeout-based removal, pause/resume functionality, and FIFO (First In, First Out) ordering.
Usage
import { createQueue } from '@vuetify/v0'
import type { QueueTicket } from '@vuetify/v0'
interface Task extends QueueTicket {
name: string
priority: number
}
const queue = createQueue<Task>({ timeout: 5000 })
const task = queue.register({ name: 'Build assets', priority: 1 })
console.log(task.isPaused.value) // false (first item is active)
console.log(queue.size) // 1
// Pause all timers
queue.pause()
// Resume timers
queue.resume()Reactivity
createQueue extends createRegistry with minimal reactivity for performance. Timeout state is managed internally.
Need reactive queue items? Wrap with useProxyRegistry(queue) for full template reactivity.
Architecture
createQueue extends createRegistry with FIFO ordering and timeout management:
Examples
Upload Queue
This example demonstrates sequential processing with createQueue. Unlike notifications that display simultaneously, the queue processes one item at a time—the first item uploads while others wait their turn.
File breakdown:
| File | Role |
|---|---|
context.ts | Defines UploadInput/Upload types and the context with first, add, cancel |
UploadProvider.vue | Creates the queue, exposes first computed, watches it to start processing |
UploadConsumer.vue | Displays first item with progress bar, pending items in FIFO order |
uploads.vue | Entry point that composes Provider around Consumer |
Key patterns:
Expose
firstas a computed fromproxy.values[0]Watch
firstto react when a new item becomes activeuseProxyRegistryfor reactive access to queue itemsItems auto-advance when the first one completes
Click “Add File” multiple times to see queuing behavior. Only one file uploads at a time.
Functions
Options
Properties
Methods
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefinedSeek for a ticket based on direction and optional predicate
on
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<Z, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
register
(ticket?: Partial<Z>) => ERegister a new ticket in the queue (accepts input type, returns output type)