Nuxt•3mo ago

Where to put <NuxtRouteAnnouncer /> when using Nuxt UI (UApp)?

A typical app.vue looks like this:

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

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

With Nuxt UI, they recommend wrapping in <UApp/>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

So with Nuxt UI, where would <NuxtRouteAnnouncer /> be placed? Inside or outside of <UApp/>? My AI told me to put it outside of it when I asked. But a recent video I watched regarding Claude Code and Nuxt UI , Claude Code put it inside of it. So I am not sure which one is correct...or does it not matter? Can it can live anywhere? Thank you.

John Komarnicki

YouTube

Nuxt UI's Model Context Protocol is here... Let's test it

📕 Nuxt Course: https://www.learnnuxt.dev/ 🛍 MCP Docs: https://ui4.nuxt.com/docs/getting-started/ai/mcp In this video we take a look at the new MCP server for Nuxt UI. Other Resources 📕 Vue 3 Course: https://johnkomarnicki.gumroad.com/l/tqrmw 🤖 Website: https://johnkomarnicki.com/ 🐦 Twitter: https://twitter.com/john_komarnicki

2 Replies

kapa.ai•3mo ago

Hi @SmartAceDesigns. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: put NuxtRouteAnnouncer inside your app’s root tree, and it’s fine to place it inside UApp. What we know from the docs: - Nuxt recommends adding NuxtRouteAnnouncer in app.vue (or a layout) to announce page title changes for accessibility. Example shows it alongside NuxtLayout and NuxtPage in app.vue. [NuxtRouteAnnouncer] - When you use the pages/ directory, Nuxt’s default app.vue now includes a route announcer by default, reinforcing that it belongs in the root app structure. [PR note; NuxtPage] - Nuxt UI requires wrapping your app with UApp at the root, and their examples show UApp wrapping your Layout/Page structure. [Nuxt UI install; App component; Header example] Putting it together: - UApp is a provider that sets global config (toasts, tooltips, overlays). It’s intended to wrap the interactive app content. [App component] - NuxtRouteAnnouncer ties into route/title changes and renders a hidden element to announce them. It can be placed in app.vue or a layout. [NuxtRouteAnnouncer] Therefore, a solid pattern with Nuxt UI is:

<template>
  <UApp>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

<template>
  <UApp>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

This keeps the announcer within the same app tree that UApp configures (and close to your layout/page), while following both Nuxt’s guidance (place it in app.vue/layout) and Nuxt UI’s requirement (wrap your app with UApp). [NuxtRouteAnnouncer; Nuxt UI install; App component] If you place it outside UApp, the docs don’t explicitly forbid it, but there’s no benefit, and you’d separate it from the app providers that manage global UI behavior. The knowledge sources do not explicitly state a strict inside/outside rule, but the examples and purposes imply it should live inside your root app wrapper. [NuxtRouteAnnouncer; App component] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1146222328242516020> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Where to put <NuxtRouteAnnouncer /> when using Nuxt UI (UApp)?

Did you find this page helpful?