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

title	description	navigation	links
useRouteAnnouncer	This composable observes the page title changes and updates the announcer message accordingly.	badge New	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 will be available in Nuxt v3.12 or in the nightly release channel. ::

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 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>