createQueue
FIFO queue for time-based collections with automatic timeout removal and pause/resume support.
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()Context / DI
Use createQueueContext to share a queue instance across a component tree:
import { createQueueContext } from '@vuetify/v0'
export const [useToasts, provideToasts, toasts] =
createQueueContext({ namespace: 'my:toasts', timeout: 5000 })
// In parent component
provideToasts()
// In child component
const queue = useToasts()
queue.register({ id: crypto.randomUUID(), value: 'Saved!' })Architecture
createQueue extends createRegistry with FIFO ordering and timeout management:
Timeout Behavior
The timeout option controls how long a ticket stays in the queue before auto-removal:
| Value | Behavior |
|---|---|
undefined | Uses the global default from queue options (default: 3000ms) |
number | Auto-removed after that many milliseconds |
-1 | Persistent — never auto-removed, must call ticket.dismiss() manually |
Only the first ticket runs its timer at any time. All others wait with isPaused: true until they reach the front.
const queue = createQueue({ timeout: 5000 }) // global default
queue.register({ value: 'Auto (5s)' }) // uses 5000ms
queue.register({ value: 'Custom (10s)', timeout: 10000 })
queue.register({ value: 'Sticky', timeout: -1 }) // must be dismissedHover-to-pause pattern Call queue.pause() on mouseenter and queue.resume() on mouseleave to pause the active toast while the user reads it.
Reactivity
createQueue extends createRegistry with minimal reactivity for performance. Timeout state is managed internally.
| Property/Method | Notes |
|---|---|
register(ticket?) | Add to queue; starts timer if first, otherwise paused |
unregister(id?) | Remove by ID, or first ticket if omitted. Returns the removed ticket |
pause() | Pause the first ticket’s timer. Returns the paused ticket or undefined |
resume() | Resume the first paused ticket’s timer. Resets to full duration |
ticket isPaused | true while waiting in queue or manually paused |
ticket dismiss() | Shorthand for queue.unregister(ticket.id) |
Need reactive queue items? Wrap with useProxyRegistry(queue) for full template reactivity.