<NuxtRouteAnnouncer>

::important This component is available in Nuxt v3.12+. ::

:read-more{title="Nuxt accessibility" to="/docs/4.x/guide/best-practices/accessibility#route-announcements"}

Usage#

Add <NuxtRouteAnnouncer/> in your app.vue or app/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.

```vue [app/app.vue]

## Slots

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

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

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

::callout For announcing in-page content changes (form validation, toast notifications, loading states, etc.), use the <NuxtAnnouncer> component with the useAnnouncer composable instead. ::