<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. (defaultfalse
)politeness
: Sets the urgency for screen reader announcements:off
(disable the announcement),polite
(waits for silence), orassertive
(interrupts immediately). (defaultpolite
)
This component is optional.
To achieve full customization, you can implement your own one based on its source code.
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.