use-queue

Create a typed reactive FIFO queue.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useQueue } from "@vizejs/composable/use-queue";

Try it

Print documents in order

Process jobs first in, first out, with an empty state that disables the action.

Open the interactive example

What to observe: Print next prints Invoice, then Ticket. Add print job appends Report 1 at the end. When the queue is empty, Print next is disabled.

enqueue returns the new size and dequeue returns the removed item or undefined. Pass capacity and overflow to bound the queue.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useQueue } from "@vizejs/composable/use-queue";

const { items, isEmpty, enqueue, dequeue } = useQueue<string>(["Invoice", "Ticket"]);
const printed = ref("Nothing printed yet.");
let next = 1;

function addJob() {
  enqueue(`Report ${next}`);
  next += 1;
}

function printNext() {
  const job = dequeue();
  if (job !== undefined) printed.value = `Printed ${job}.`;
}
</script>

<template>
  <div class="composable-example">
    <p>Send documents to a printer in the order they arrive.</p>
    <div class="example-actions">
      <button type="button" @click="addJob">Add print job</button>
      <button type="button" :disabled="isEmpty" @click="printNext">Print next</button>
    </div>
    <ol aria-label="Print queue">
      <li v-for="(job, index) in items" :key="`${index}-${job}`">{{ job }}</li>
    </ol>
    <output aria-live="polite">{{ printed }}</output>
  </div>
</template>

Runtime contract

API

useQueue

Create a typed reactive FIFO queue. Dequeueing is amortized O(1): the head advances through a backing buffer that is compacted only after enough slots have been consumed, so large queues never pay for Array.prototype.shift. Reactivity is driven by a single version counter; items, size, isEmpty, and peek all re-evaluate after each mutation. Purely synchronous state: safe during server rendering (no host globals, no timers) and nothing to dispose.

function useQueue<Item>( initial: Iterable<Item> = [], options: UseQueueOptions = {}, ): QueueControls<Item>

const jobs = useQueue<string>([], { capacity: 100, overflow: "reject" });
jobs.enqueue("a", "b");
jobs.dequeue(); // "a"

Types

UseQueueOptions

Options for useQueue.

QueueControls

Reactive first-in, first-out queue returned by useQueue.