Nuxt/docs/3.api/1.components/12.nuxt-route-announcer.md

title	description	navigation	links
<NuxtRouteAnnouncer>	Add a hidden element with the page title for assistive technologies.	badge New	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts xs

::important 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.

<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)

::callout This component is optional. :br To achieve full customization, you can implement your own one based on its source code. ::

::callout You can hook into the underlying announcer instance using the useRouteAnnouncer composable, which allows you to set a custom announcement message. ::