use-set

Create a reactive Set with typed helpers.

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

Try it

Pick topics to follow

Track a set of unique selections with toggle buttons that report their pressed state.

Open the interactive example

What to observe: Vue starts selected. Toggle Vite and TypeScript to add them in order; toggle Vue to remove it. Clear topics empties the selection.

values keeps insertion order. has() and toggle() are reactive, so aria-pressed follows the set. Adding an existing item does nothing.

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

const topics = ["Vue", "Vite", "TypeScript", "Testing"];
const { values, has, toggle, clear } = useSet<string>(["Vue"]);
</script>

<template>
  <div class="composable-example">
    <p>Pick the topics you want to follow.</p>
    <div class="example-actions">
      <button
        v-for="topic in topics"
        :key="topic"
        type="button"
        :aria-pressed="has(topic)"
        @click="() => toggle(topic)"
      >
        {{ topic }}
      </button>
      <button type="button" @click="() => clear()">Clear topics</button>
    </div>
    <output aria-live="polite">{{
      values.length === 0 ? "No topics selected." : `Following: ${values.join(", ")}`
    }}</output>
  </div>
</template>

Runtime contract

API

useSet

Create a reactive Set with typed helpers. The member type is inferred from the initial items (useSet(["a"]) is a Set<string>); pass a type argument for an initially empty set. Membership checks are tracked per item. The set-algebra helpers return new plain sets and do not require ES2025 Set methods. Purely synchronous state: safe during server rendering (no host globals, no timers) and nothing to dispose.

function useSet<Item = unknown>(initial: Iterable<Item> = []): SetControls<Item>

const selected = useSet<number>();
selected.toggle(3); // true
selected.has(3); // true

Types

SetControls

Reactive set wrapper returned by useSet.