<NuxtAnnouncer>

::important This component is available in Nuxt v4.4.2+. ::

Usage#

Add <NuxtAnnouncer/> in your app.vue or app/layouts/ to enable announcing dynamic content changes to screen readers. This is useful for form validation, toast notifications, loading states, and other in-page updates.

```vue [app/app.vue]

Then use the [`useAnnouncer`](/docs/4.x/api/composables/use-announcer) composable anywhere in your app to announce messages:

```vue [app/pages/contact.vue]
<script setup lang="ts">
const { polite, assertive } = useAnnouncer()

async function submitForm () {
  try {
    await $fetch('/api/contact', { method: 'POST', body: formData })
    polite('Message sent successfully')
  } catch (error) {
    assertive('Error: Failed to send message')
  }
}
</script>

Slots#

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

<template>
  <NuxtAnnouncer>
    <template #default="{ message }">
      <p>{{ message }}</p>
    </template>
  </NuxtAnnouncer>
</template>

Props#

• atomic: Controls if screen readers announce only changes or the entire content. Set to true for full content readouts on updates, false for changes only. (default true)
• politeness: Sets the default urgency for screen reader announcements: off (disable the announcement), polite (waits for silence), or assertive (interrupts immediately). (default polite)

Differences from <NuxtRouteAnnouncer>#

::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 useAnnouncer composable, which allows you to set custom announcement messages. ::