v3.16
Nuxt on GitHub

useRouteAnnouncer

Source
This composable observes the page title changes and updates the announcer message accordingly.
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 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

pages/index.vue
<script setup lang="ts">
  const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
    politeness: 'assertive'
  })
</script>