Nuxt 3 client-side navigation and screen reader focus persistence

Recommended pattern for focus after Nuxt 3 client‑side navigation

Answer: add a client‑only global navigation guard that runs after each route change, waits for the DOM to hydrate, then moves focus to a predictable landmark (e.g., <main> or the first <h1>).

Why the issue occurs (explanation)

NuxtLink and navigateTo() update the URL and render the new page, but the browser does not move keyboard focus. Screen‑reader users therefore hear the updated title via useHead() while focus remains on the triggering link or the previous page’s context, breaking WCAG 2.4.3 Focus Order.

Confirmed facts about the solution

• router.afterEach runs after the navigation promise resolves, on both client‑side SPA and hydration of SSR/static pages.
• Wrapping the focus call in nextTick (or the equivalent useNuxtApp().hook('app:mounted')) guarantees that the new DOM is present before focusing, preventing hydration mismatch warnings.
• The guard must be executed only in the browser (process.client) to avoid server‑side errors.

Step‑by‑step implementation

1. Create a client‑only plugin, e.g. plugins/focus.after.navigate.client.ts.
2. In the plugin:

import { defineNuxtPlugin } from '#app'
import { nextTick } from 'vue'

export default defineNuxtPlugin(() => {
  if (process.client) {
    const router = useRouter()
    router.afterEach((to, from) => {
      // Wait for the new render to be in the DOM
      nextTick(() => {
        // Try to focus a main landmark; fallback to first h1
        const target = document.querySelector('main, h1') as HTMLElement | null
        if (target) {
          target.focus()
        }
      })
    })
  }
})

3. If your project uses TypeScript, rename the file to .client.ts so Nuxt loads it only on the client.
4. Optionally make the selector reusable via a composable:

export function useFocusAfterNavigate(selector = 'main, h1') {
  if (process.client) {
    const router = useRouter()
    router.afterEach(() => {
      nextTick(() => {
        const el = document.querySelector(selector) as HTMLElement | null
        el?.focus()
      })
    })
  }
}

5. Call the composable from a layout or page if you need per‑page selectors.

Standardising across rendering modes and third‑party UI libraries

• The process.client check guarantees the guard never runs during SSR or static generation, avoiding server‑side errors.
• Using nextTick aligns with Vue’s hydration cycle, so the same code works in SPA mode (npm run dev) and after static hydration (npm run preview).
• If you employ a focus‑trapping library (e.g., a modal manager), ensure the guard runs after the library’s own focus logic or temporarily disable it while a modal is open. You can expose a flag via a composable (setFocusGuardEnabled(false)) and check it inside the afterEach callback.

Missing diagnostic detail

Are you using any third‑party focus‑trapping or modal library that manages focus after navigation? Knowing this determines whether you need to suppress the guard while such a component is active.