Skip to main content

​
Overview

A queue composable for managing time-based collections with automatic timeout-based removal, pause/resume functionality, and FIFO ordering. Built on top of createRegistry, the queue automatically manages timeouts for tickets and ensures only the first ticket in the queue is active at any time.

​
Basic Usage

import { createQueue } from '@vuetify/v0'

const queue = createQueue({ timeout: 3000 })

// Register with default timeout
const ticket1 = queue.register({ value: 'First notification' })

// Register with custom timeout
const ticket2 = queue.register({ 
  value: 'Second notification', 
  timeout: 5000 
})

// Register persistent ticket (must be manually dismissed)
const ticket3 = queue.register({ 
  value: 'Important', 
  timeout: -1 
})

// Dismiss a ticket
ticket3.dismiss()

​
Function Signature

function createQueue<
  Z extends QueueTicketInput = QueueTicketInput,
  E extends QueueTicket<Z> = QueueTicket<Z>,
  R extends QueueContext<Z, E> = QueueContext<Z, E>
>(options?: QueueOptions): R

​
Parameters

​
options
QueueOptions
Configuration options for the queue
​
timeout
number
default:"3000"
Default timeout in milliseconds for tickets without explicit timeout

​
Returns

​
QueueContext
object
Queue context with methods and properties
​
register
function
Register a new ticket in the queue. Returns the registered ticket with dismiss() method.
const ticket = queue.register({
  value: 'Message',
  timeout: 5000 // Optional, uses default if not provided
})
​
unregister
function
Remove a ticket by ID. If no ID provided, removes the first ticket.
queue.unregister(ticket.id)
// or remove first ticket
const removed = queue.unregister()
​
pause
function
Pause the timeout of the first ticket in the queue
const paused = queue.pause()
console.log(paused?.isPaused) // true
​
resume
function
Resume the timeout of the first paused ticket
const resumed = queue.resume()
console.log(resumed?.isPaused) // false
​
clear
function
Remove all tickets and clear all timeouts
queue.clear()
console.log(queue.size) // 0
​
offboard
function
Batch unregister multiple tickets by ID array
queue.offboard([ticket1.id, ticket2.id])
​
size
number
Current number of tickets in the queue

​
Timeout Behavior

​
Default Timeout

Tickets use the default timeout from queue options if not specified: 
const queue = createQueue({ timeout: 5000 })
const ticket = queue.register({ value: 'Uses 5s timeout' })

​
Custom Timeout

Override timeout per ticket: 
const ticket = queue.register({ 
  value: 'Custom timeout',
  timeout: 3000 
})

​
Persistent Tickets

Use -1 to prevent automatic removal: 
const ticket = queue.register({ 
  value: 'Stays until dismissed',
  timeout: -1 
})

// Must manually dismiss
ticket.dismiss()

​
Queue Progression

Only the first ticket’s timeout is active. When removed, the next ticket automatically becomes active: 
const queue = createQueue({ timeout: 1000 })

const ticket1 = queue.register({ value: 'First' })
const ticket2 = queue.register({ value: 'Second' })

console.log(ticket1.isPaused) // false (active)
console.log(ticket2.isPaused) // true (paused)

// After 1 second, ticket1 is removed automatically
// ticket2 becomes active and its timeout starts

​
Pause and Resume

Control timeout progression: 
const queue = createQueue({ timeout: 5000 })
const ticket = queue.register({ value: 'Pausable' })

// Pause the active ticket
queue.pause()
console.log(ticket.isPaused) // true

// Resume when ready
queue.resume()
console.log(ticket.isPaused) // false

​
Context Pattern

Use dependency injection for global queue access: 
import { createQueueContext } from '@vuetify/v0'

export const [useQueue, provideQueue, queue] = createQueueContext({
  timeout: 5000,
})

// Parent component
provideQueue()

// Child component
const queue = useQueue()
queue.register({ value: 'Notification' })

​
TypeScript

​
Custom Ticket Types

Extend ticket properties: 
interface NotificationTicket extends QueueTicketInput {
  title: string
  severity: 'info' | 'warning' | 'error'
}

const queue = createQueue<NotificationTicket>()

const ticket = queue.register({
  title: 'Error occurred',
  severity: 'error',
  value: 'Something went wrong',
})

Build docs developers (and LLMs) love

Get started for freeTalk to us