Make your Nuxt experience count in The State of JavaScript 2024

useRouteAnnouncer

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>