gil/gil-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
gil-wiki/reference/4.api/2.composables/use-route-announcer.md
gil 5f664546cf feat: 위키 저장소 초기 커밋 
- CLAUDE.md 운영 규칙
- wiki/ 정리된 지식 페이지 (Nuxt + Claude Code)
- raw/ 원본 자료
- reference/ Nuxt 4.x 공식 문서

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-13 00:31:51 +09:00

1.7 KiB
Raw Permalink Blame History

title, description, links
title description links
useRouteAnnouncer This composable observes the page title changes and updates the announcer message accordingly.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/route-announcer.ts 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> 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

<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 instead. ::