DejaVue #053 - New Release: Nuxt 3.16 and Nuxt UI 3

👀 Get 20% OFF of Nuxt UI Pro with code DEJAVUE https://dejavue.fm/nuxt-ui * (valid until April 10th) Nuxt 3.16 dropped and it's packed with goodies! In this episode, Alex and Michael break down all the cool stuff in this release that'll make your Nuxt development smoother. They dive into the new command to initialize a Nuxt application, the performance-game-changing lazy hydration support that'll boost your app's performance, and named layer aliases (that you've been waiting for). Plus, huge performance improvements, better error messages with Nitro 2.11 and debugging improvements that'll save you hours of head-scratching. But wait, there's more! The duo also geeks out over Nuxt UI v3, which (surprise!) now works with plain Vue.js too - not just Nuxt. Learn how it leverages Tailwind v4, introduces a sweet CSS variables-based design system, and builds on Reka UI primitives for better accessibility. And somehow, a discount code for Nuxt UI Pro gets snuck in there too! Enjoy The Episode! --- Your Hosts * Alexander Lichter * YouTube - @TheAlexLichter * Bluesky - https://bsky.app/profile/thealexlichter.com * Web - https://www.lichter.io/ * Michael Thiessen * Twitter - https://twitter.com/MichaelThiessen * YouTube - @michaelnthiessen * Web - https://michaelnthiessen.com/ -- Chaptermarks: 00:00 Intro 00:54 Nuxt 3.16 Feature Overview 01:27 A new way to initialize Nuxt projects 07:06 Lazy Hydration in Nuxt 16:05 Named Layer Aliases 17:45 Lines of Code vs. Complexity 20:16 What a new Nitro minor brings to the table 21:33 Fine-grained debugging options 23:25 Nuxt Devtools v2 25:47 Faster module resolution (and faster boot up time) 27:39 Using OXC to speed up component parsing 28:58 Benchmark performance improvements 31:43 Nuxt UI v3 40:58 Sneak peek at next weeks episode 👀 41:17 Suggest a new slogan! -- Links and Resources ▶ Mastering Nuxt is out NOW https://masteringnuxt.com/?friend=DEJAVUE * ▶ Nuxt 3.16 blog post https://nuxt.com/blog/v3-16 ▶ Vue implementing Lazy Hydration https://blog.vuejs.org/posts/vue-3-5 ▶ Nuxt Lazy Hydration PR https://github.com/nuxt/nuxt/pull/26468 ▶ Lazy Hydration in-depth https://www.youtube.com/watch?v=hibbpTe661U ▶ More about Nuxt Layers https://www.youtube.com/watch?v=fr5yo3aVkfA ▶ Revamping data fetching in Nuxt PR https://github.com/nuxt/nuxt/pull/31373 ▶ Nitro 2.11 https://github.com/nitrojs/nitro/releases/tag/v2.11.0 ▶ Youch https://github.com/poppinss/youch ▶ Harlan's PR to speed up module resolution https://github.com/nuxt/nuxt/pull/31037 ▶ OXC PR for Nuxt.js https://github.com/nuxt/nuxt/pull/30066 ▶ Rolldown-powered Vite https://github.com/vitejs/rolldown-vite ▶ CodSpeed https://codspeed.io/ ▶ Tailwind Variants https://www.tailwind-variants.org/ -- Follow DejaVue on ▶ The Web: https://dejavue.fm/ ▶ Bluesky https://bsky.app/profile/dejavue.fm ▶ Twitter: https://twitter.com/dejavuefm ▶ Apple Podcast: https://podcasts.apple.com/us/podcast/dejavue/id1737631788 ▶ YouTube: https://www.youtube.com/@DejaVueFm ▶ Spotify: https://open.spotify.com/show/5VQ15QHkC7HSmwTYR7vCPF ▶ Deezer: https://www.deezer.com/show/1000792252 ▶ Amazon Music: https://music.amazon.com/podcasts/798ccbb2-4a8f-4d83-bff7-00cbc8730f56 ▶ Pocket Casts: https://pca.st/49qr8d1k -- Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.