Nuxt/docs/3.api/2.composables/use-route-announcer.md

61 lines
1.7 KiB
Markdown
Raw Normal View History

---
title: 'useRouteAnnouncer'
description: This composable observes the page title changes and updates the announcer message accordingly.
navigation:
badge: New
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/route-announcer.ts
size: xs
---
::important
This composable will be available in Nuxt v3.12 or in [the nightly release channel](/docs/guide/going-further/nightly-release-channel).
::
## Description
A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/api/components/nuxt-route-announcer) and controllable.
It hooks into Unhead's [`dom:rendered`](https://unhead.unjs.io/api/core/hooks#dom-hooks) to read the page's title and set it as the announcer message.
## Parameters
- `politeness`: Sets the urgency for screen reader announcements: `off` (disable the announcement), `polite` (waits for silence), or `assertive` (interrupts immediately). (default `polite`).
## Properties
### `message`
- **type**: `Ref<string>`
- **description**: The message to announce
### `politeness`
- **type**: `Ref<string>`
- **description**: Screen reader announcement urgency level `off`, `polite`, or `assertive`
## Methods
### `set(message, politeness = "polite")`
Sets the message to announce with its urgency level.
### `polite(message)`
Sets the message with `politeness = "polite"`
### `assertive(message)`
Sets the message with `politeness = "assertive"`
## Example
```ts
<script setup lang="ts">
const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
politeness: 'assertive'
})
</script>
```