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

<NuxtRouteAnnouncer>

Add a hidden element with the page title for assistive technologies.

This component will be available in Nuxt v3.12 or in the nightly release channel.

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.