gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
63 lines
1.7 KiB
Markdown
63 lines
1.7 KiB
Markdown
---
|
|
title: 'useRouteAnnouncer'
|
|
description: This composable observes the page title changes and updates the announcer message accordingly.
|
|
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 is available in Nuxt v3.12+.
|
|
::
|
|
|
|
## Description
|
|
|
|
A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/4.x/api/components/nuxt-route-announcer) and controllable.
|
|
It hooks into Unhead's `dom:rendered` hook 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
|
|
|
|
```vue [app/pages/index.vue]
|
|
<script setup lang="ts">
|
|
const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
|
|
politeness: 'assertive',
|
|
})
|
|
</script>
|
|
```
|
|
|
|
::callout
|
|
For announcing dynamic in-page content changes (form validation, toasts, loading states), use [`useAnnouncer`](/docs/4.x/api/composables/use-announcer) instead.
|
|
::
|