<NuxtRouteAnnouncer> · Nuxt Components

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.

The <Teleport> component teleports a component to a different location in the DOM.

onPrehydrate

Use onPrehydrate to run a callback on the client immediately before Nuxt hydrates the page.