<NuxtRouteAnnouncer>

Source
The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies.
This component is available in Nuxt v3.12+.

Usage

Add <NuxtRouteAnnouncer/> in your app.vue or layouts/ to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.

app.vue
<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Slots

You can pass custom HTML or components through the route announcer's default slot.

<template>
  <NuxtRouteAnnouncer>
    <template #default="{ message }">
      <p>{{ message }} was loaded.</p>
    </template>
  </NuxtRouteAnnouncer>
</template>

Props

  • atomic: Controls if screen readers only announce changes or the entire content. Set to true for full content readouts on updates, false for changes only. (default false)
  • politeness: Sets the urgency for screen reader announcements: off (disable the announcement), polite (waits for silence), or assertive (interrupts immediately). (default polite)
This component is optional.
To achieve full customization, you can implement your own one based on its source code.
You can hook into the underlying announcer instance using the useRouteAnnouncer composable, which allows you to set a custom announcement message.