Vue Performance: Finding and Fixing the Slow Parts

Profile before touching anything

The Vue Devtools profiler shows which components render, how often, and why; the browser Performance tab shows whether time goes to scripting, rendering, or layout. Five minutes of measurement routinely contradicts intuition, and the component you suspected is rarely the one repainting four hundred times.

The fixes that usually matter

• Long lists: virtualize anything past a few hundred rows so only visible items render; stable :keys everywhere, and v-memo on expensive rows that rarely change.
• Over-reactivity: wrap large, replace-not-mutate data, chart series, map geometries, API dumps, in shallowRef, and Vue stops proxying ten thousand nested objects it never needed to track.
• Expensive computeds: a computed that filters thousands of items reruns on any tracked change; narrow its dependencies or precompute upstream.
• Conditional weight: v-if actually removes heavy subtrees; v-show keeps them alive and rendering.

Ship less, hydrate later

Bundle size is startup performance: lazy-load routes, defer heavy widgets with defineAsyncComponent, and audit what each marketing tag added. In Nuxt, lazy hydration, hydrate a component on visibility or idle rather than immediately, is now built in, and below-the-fold interactive widgets are exactly what it is for.

Set a simple budget, interaction under 100 milliseconds, list scroll at 60fps, and stop when you hit it. Performance work past the point users can feel is hobby time wearing a work badge.