useRouteAnnouncer

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

:read-more{title="Nuxt accessibility" to="/docs/4.x/guide/best-practices/accessibility#route-announcements"}

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]

```

::callout For announcing dynamic in-page content changes (form validation, toasts, loading states), use useAnnouncer instead. ::