Performance-Minded Development with Nuxt 3
summary
Walks through actionable fixes: run Nuxt Analyze to spot heavy deps; replace or selectively import bulky packages; avoid wrapping layouts in clientOnly (it caused ~5s of idle blank screen for the example app); use skeleton fallbacks and defer browser-only code with process.client or import.meta.do client; adopt the nux delay hydration module (cut blocking time nearly in half), use NImage/NLink, set build.minify true to minify inline CSS, and tweak the build.manifest hook plus route rules for SSR + caching.
AI-written summary · about
chapters (20)
- 0:00Performance-Minded Development with Nuxt 3
- 1:26A Performance Journey
- 2:46Preparing to Climb
- 4:28Bloated Builds
- 4:48Analyze and revise
- 9:51Overuse of ClientOnly
- 11:18Use selective client deferral
- 13:10Overlooking the lifecycle
- 15:32Tap into build-in composables
- 16:28Developing in isolation
- 16:56Leverage the ecosystem
- 18:45Missing out on key Nuxt functionality
- 19:36Embrace performance-focused features
- 21:22Neglecting the server and host
- 22:21Streamline the server response
- 24:14Treating builds as immutable
- 24:43Calibrate with custom builds
- 25:55Giving up on SSR
- 27:43Join the community
- 28:28Just the start
related talks
21mNuxt Performances
33mHow Nuxt 3 is allowing us to build faster applications?
25mHow we are optimizing Nuxt without removing features in VueStorefront
26mBe Lazy, Be Smart, Be Nuxt.
41mBuilding for the Edge with Nuxt 3 (live coding)
33mNuxt.js 2.0
26mThe State of Nuxt
25mFirst commits will set your Nuxt app performance for success!