The two live regions announce() speaks through. Render one per app, anywhere — nothing here is ever visible.
Import it from rei-kit:
import { AnnounceHost } from 'rei-kit'
Open AnnounceHost in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { AnnounceHost, BaseButton, useAnnounce } from 'rei-kit'
import { ref } from 'vue'
const { announce } = useAnnounce()
const count = ref(0)
function filter() {
count.value = (count.value + 3) % 12
// Nothing on screen changed enough to say this, so it is said.
announce(`${count.value} results`)
}
</script>
<template>
<div class="flex items-center gap-3">
<!-- Rendered once per app. Nothing here is ever visible. -->
<AnnounceHost />
<BaseButton variant="secondary" @click="filter">Filter</BaseButton>
<span class="text-ink-soft text-sm">{{ count }} results</span>
</div>
</template>
This component takes no props.
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.