Nuxt 2 is reaching End-of-Life on June 30th, 2024.

<NuxtRouteAnnouncer>

Add a hidden element with the page title for 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's 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 default slot.

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

Props

  • atomic: Controls if screen readers announce only changes or the entire content. Set to true for full content readout 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.