Join the Nuxt Team at Frontend Nation 4-7 June.

useRouteAnnouncer

This composable observes the page title changes and updates the announcer message accordingly.

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>