use-stack

Create a typed reactive LIFO stack.

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 { useStack } from "@vizejs/composable/use-stack";

Try it

Keep a back stack

Push pages as the reader navigates and pop them with a Back button.

Open the interactive example

What to observe: Open Docs and Guide, then Back returns to Docs. Back is disabled when only Home remains.

items is ordered bottom to top, so the current page is the last item. pop() returns the removed page.

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 { computed } from "vue";
import { useStack } from "@vizejs/composable/use-stack";

const { items, size, push, pop } = useStack<string>(["Home"]);
const current = computed(() => items.value.at(-1) ?? "Home");
const pages = ["Docs", "Guide", "API"];
</script>

<template>
  <div class="composable-example">
    <p>Keep a back stack for in-app navigation.</p>
    <nav aria-label="Pages" class="example-actions">
      <button v-for="page in pages" :key="page" type="button" @click="() => push(page)">
        Open {{ page }}
      </button>
      <button type="button" :disabled="size <= 1" @click="() => pop()">Back</button>
    </nav>
    <output aria-live="polite"
      >Current page: {{ current }} · History: {{ items.join(" › ") }}</output
    >
  </div>
</template>

Runtime contract

API

useStack

Create a typed reactive LIFO stack. push and pop are O(1). A bounded stack either drops its bottom item or rejects new pushes when full. Reactivity is driven by a version counter, so items, size, isEmpty, and peek re-evaluate after every mutation. Purely synchronous state: safe during server rendering (no host globals, no timers) and nothing to dispose.

function useStack<Item>( initial: Iterable<Item> = [], options: UseStackOptions = {}, ): StackControls<Item>

const breadcrumbs = useStack<string>(["home"]);
breadcrumbs.push("settings");
breadcrumbs.pop(); // "settings"

Types

UseStackOptions

Options for useStack.

StackControls

Reactive last-in, first-out stack returned by useStack.