---
title: "<NuxtAnnouncer>"
description: "The <NuxtAnnouncer> component adds a hidden element to announce dynamic content changes to assistive technologies."
canonical_url: "https://nuxt.com/docs/4.x/api/components/nuxt-announcer"
---
# \<NuxtAnnouncer>

> The \<NuxtAnnouncer> component adds a hidden element to announce dynamic content changes to assistive technologies.

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

## Usage

Add `<NuxtAnnouncer/>` in your [`app.vue`](https://nuxt.com/docs/4.x/directory-structure/app/app) or [`app/layouts/`](https://nuxt.com/docs/4.x/directory-structure/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]
<template>
  <NuxtAnnouncer />
  <NuxtRouteAnnouncer />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

Then use the [`useAnnouncer`](https://nuxt.com/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.

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

| Aspect             | `<NuxtRouteAnnouncer>`       | `<NuxtAnnouncer>`                   |
| ------------------ | ---------------------------- | ----------------------------------- |
| **Purpose**        | Announces route/page changes | Announces any dynamic content       |
| **Trigger**        | Automatic on navigation      | Manual via `polite()`/`assertive()` |
| **Message source** | Page `<title>`               | Developer-provided                  |
| **atomic default** | `false`                      | `true`                              |

::callout
This component is optional.   

To achieve full customization, you can implement your own one based on [its source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-announcer.ts).
::

::callout
You can hook into the underlying announcer instance using [the `useAnnouncer` composable](https://nuxt.com/docs/4.x/api/composables/use-announcer), which allows you to set custom announcement messages.
::

---

- [Source](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-announcer.ts)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.