<NuxtAnnouncer>

Использование

Добавьте <NuxtAnnouncer/> в app.vue или app/layouts/, чтобы программы чтения с экрана могли озвучивать динамические изменения контента. Удобно для валидации форм, уведомлений, состояний загрузки и других обновлений на странице.

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

Затем используйте композабл useAnnouncer в любом месте приложения, чтобы озвучивать сообщения:

<script setup lang="ts">
const { polite, assertive } = useAnnouncer()

async function submitForm () {
  try {
    await $fetch('/api/contact', { method: 'POST', body: formData })
    polite('Сообщение успешно отправлено')
  } catch (error) {
    assertive('Ошибка: не удалось отправить сообщение')
  }
}
</script>

Слоты

Через слот по умолчанию можно передать свой HTML или компоненты.

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

Пропсы

• atomic: управляет тем, озвучивать ли только изменения или весь контент. true — полное озвучивание при обновлении, false — только изменения. (по умолчанию true)
• politeness: срочность озвучивания: off (отключить), polite (дождаться паузы), assertive (озвучить сразу). (по умолчанию polite)

Отличия от <NuxtRouteAnnouncer>