useRouteAnnouncer
This composable observes the page title changes and updates the announcer message accordingly.
This composable is available in Nuxt v3.12+.
Description
A composable which observes the page title changes and updates the announcer message accordingly. Used by <NuxtRouteAnnouncer>
and controllable.
It hooks into Unhead's dom:rendered
to read the page's title and set it as the announcer message.
Parameters
politeness
: Sets the urgency for screen reader announcements:off
(disable the announcement),polite
(waits for silence), orassertive
(interrupts immediately). (defaultpolite
).
Properties
message
- type:
Ref<string>
- description: The message to announce
politeness
- type:
Ref<string>
- description: Screen reader announcement urgency level
off
,polite
, orassertive
Methods
set(message, politeness = "polite")
Sets the message to announce with its urgency level.
polite(message)
Sets the message with politeness = "polite"
assertive(message)
Sets the message with politeness = "assertive"
Example
pages/index.vue
<script setup lang="ts">
const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
politeness: 'assertive'
})
</script>