Written from your performance, accessibility and security note. The matching study page is Best practices — deployment, performance, accessibility, security.
shallowRef for large replaced data, v-once, v-memo for big lists, defineAsyncComponent, virtual scrolling.aria-hidden on focusable elements, an accessible password field, aria-labelledby.javascript: URLs, and rendering user rich text safely.loadAsyncComponent does not exist; it is defineAsyncComponent, or the Lazy prefix in Nuxt.
"Never skip headings h4 to h2" is the allowed direction. The rule is not to jump down more than one level, such as from h2 to h4. Going back up from h4 to h2 is fine.
<main>, <nav>, <header> and <footer> map to ARIA landmark roles (main, navigation, banner, contentinfo). A label is the name you add with aria-label when there are several landmarks of one kind.
The heading says aria-labeledby; the attribute is aria-labelledby, and the misspelled one is silently ignored. Your code example has it right.
javascript:alert(1) URL in a :href binding, then add a check that only allows http, https and mailto."Two kinds of cost. Page load: split code at routes and with defineAsyncComponent for heavy components, so users only download what they use. Updates: avoid deep reactivity on big data that is replaced rather than mutated (shallowRef), keep computeds stable, skip static subtrees with v-once and large-list re-renders with v-memo, and virtualize long lists so the number of DOM nodes stays small. I measure with the browser's performance panel and Vue DevTools first, then apply the one that fits."
"Route changes do not load a new page, so I move focus to a skip link or the main heading on each navigation. I keep heading levels in order, use landmark elements, label every control with a real <label> or aria-label, link hints and errors with aria-describedby, hide decorative icons with aria-hidden but never on something focusable, and avoid placeholders as labels because they disappear and usually fail contrast. Then I test with a keyboard and a screen reader."
"Partly. Text interpolation and attribute bindings are escaped, so user text cannot become markup. But v-html renders whatever it gets, a bound href can still be a javascript: URL, style bindings can carry user CSS, and compiling templates from user input runs code. So user rich text goes through a sanitizer or a Markdown renderer without raw HTML, URLs are checked, and a Content Security Policy is the second line of defence."
Nothing yet. Notes filed here show up on this page and the section overview.
Scaling up
Questions and flashcards from your notes on the Vue docs' Scaling Up chapter — why single-file components need compiling, how Vite's dev server works, code splitting, Vite 8 and Rolldown, Vue Router links, views, guards and reused instances, NuxtLink prefetching, global state on a server, test types, SSG versus SSR, and hydration mismatches from fetching and invalid HTML — with a fact check of the notes.
Nuxt under the hood
Questions and flashcards from your Nuxt internals note — carrying values from build time to runtime, the start-up sequence from config loading to the bundles, module order and modules:done, config priority across layers, Nitro and h3, why h3 instead of Express, how a request reaches the Vue renderer, and deployment presets.