12.Nuxt Route Announcer - Nuxt

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

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

<template>
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

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