Vue 3.5 Analyzed

09/19/24 • 44 min

Vue 3.5 came out recently, so why not using the opportunity to dive into the features of the new minor version? Michael and Alex will do so and discuss performance improvements, SSR features and new composables in detail.

If you wondered what the difference of the future Lazy Hydration and existing async components or what other features are part of the new minor, it is time to tune in ✨

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:26) - Performance improvements in 3.5
(04:59) - Props Destructuring out of experimental
(12:23) - SSR Improvements
(12:52) - Lazy Hydration
(17:10) - How is Lazy Hydration different to existing async components?
(21:42) - useId
(25:25) - data-allow-mismatch
(29:02) - Web Component improvements
(31:42) - useTemplateRef
(34:34) - Deferred Teleports
(38:45) - onWatcherCleanup
(42:37) - Wrapping up

Links and Resources

10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E016 - The Future of Vue.js (with Evan You)
Vue 3.5 announcement blog post
Rolldown
Vite
Evan's Tweet about Vue using Rolldown (there are more though!)
Props Destructure RFC (now part of core)
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Hydration Error blog post
Vue.js Hydration Explained
Lazy Hydration in Nuxt (voice your opinion!)
Volkswagen package
Volar
DejaVue #E006 - Nuxt Server Components (with Julien Huang)
DejaVue #E004 - Teleports and When to Use Them
DejaVue #E011 - Learning new Vue Features and Concepts (with LearnVue aka. Matt Maribojoc)
VueUse

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.

If you wondered what the difference of the future Lazy Hydration and existing async components or what other features are part of the new minor, it is time to tune in ✨

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(01:26) - Performance improvements in 3.5
(04:59) - Props Destructuring out of experimental
(12:23) - SSR Improvements
(12:52) - Lazy Hydration
(17:10) - How is Lazy Hydration different to existing async components?
(21:42) - useId
(25:25) - data-allow-mismatch
(29:02) - Web Component improvements
(31:42) - useTemplateRef
(34:34) - Deferred Teleports
(38:45) - onWatcherCleanup
(42:37) - Wrapping up

Links and Resources

10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
DejaVue #E016 - The Future of Vue.js (with Evan You)
Vue 3.5 announcement blog post
Rolldown
Vite
Evan's Tweet about Vue using Rolldown (there are more though!)
Props Destructure RFC (now part of core)
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Hydration Error blog post
Vue.js Hydration Explained
Lazy Hydration in Nuxt (voice your opinion!)
Volkswagen package
Volar
DejaVue #E006 - Nuxt Server Components (with Julien Huang)
DejaVue #E004 - Teleports and When to Use Them
DejaVue #E011 - Learning new Vue Features and Concepts (with LearnVue aka. Matt Maribojoc)
VueUse

Previous Episode

Nuxt Modules and Open Source at work (with Lucie Haberer)

In this episode, Alex is joined by fellow Nuxt core team member Lucie Haberer, who is not only a DX Engineer at Prismic, doing open source but also public speaking.

Together they talk about Lucie's recent free Nuxt and Nuxt UI course and how she got into Vue and Nuxt. Lucie explains further why she fell in love with Nuxt modules and which modules she built so far - with some enlightening surprise there!

In addition, they talk about how Open Source works at Prismic - from when they do open source over to sponsoring projects and contributing - and many more insights.

Enjoy the episode!

Chapters

(00:00) - Welcome to DejaVue
(00:49) - A Free Nuxt UI Course
(04:02) - How you got into Vue.js
(06:42) - From Building a Nuxt module for SSG to joining the core team
(13:48) - A module to control your smart lightbulb?
(14:35) - Running a Nuxt module in every Nuxt app on the computer
(19:33) - Public Speaking and Conferences
(23:41) - Local Meetups
(26:26) - Lucie's responsibilities in the Nuxt team
(27:27) - Inbox 0 and GitHub notifications
(28:55) - Building vs. working with a framework
(31:21) - Monkey patching - but don't forget to raise an issue!
(32:11) - Being a DX Engineer
(35:20) - Prismic and Open Source
(40:56) - Open Source Sponsoring
(43:00) - Working with other frameworks
(45:36) - Wrapping up

Links and Resources

$10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE
10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
Prismic
Free Nuxt UI Course
unhead
NuxtLink RFC
.nuxtrc
Nuxt Devtools Discussion
defu
DejaVue #E024 - Between Agency Work and Open Source (with Zoey and Dan from SIDESTREAM)

Next Episode

Working at AWS (with Erik Hanchett)

While Alex is at PragVue, Michael is joined by Developer Advocate Erik Hanchett who works at no other company than AWS. In this DejaVue episode, they discuss the different duties of a Developer Advocate and skills one need to become one, as well as everything around content creation and conferences.
In addition, Erik shares how it is to write Vue code as a Software Engineer at AWS, which he did for multiple years.

Enjoy the episode!

Our Guest

Erik Hanchett

Chapters

(00:00) - Welcome to DejaVue
(00:35) - How would you describe your job?
(03:20) - Do you miss the deep technical problems?
(09:41) - Duties when speaking at a conference
(12:50) - What is Developer Advocacy?
(23:30) - Which skills do you need to be a Developer Advocate?
(26:40) - Your first content pieces doesn't have to be perfect
(28:16) - First Five unreleased DejaVue episodes
(29:44) - Putting yourself out there
(32:09) - Erik's first podcast guest appearance ever
(37:10) - Using Vue.js at Amazon Web Services
(41:29) - How did you get into Vue?
(43:16) - Working on AWS Open Source projects
(45:06) - Migrating a library from Vue 2 to Vue 3
(49:48) - Nested Slot Bonanza
(51:34) - Angular, React and Vue devs in the same project
(52:15) - Wrapping up

Links and Resources

Get 15% OFF for your Vue Toronto ticket with code DEJAVUE *
AWS Amplify
VueUse
Vue Demi
XState

Your Host

Michael Thiessen

---

DejaVue - Vue 3.5 Analyzed

Transcript

Michael Thiessen00:00:00.399

Welcome to DejaVue.

Alexander Lichter00:00:02.560

It's your favorite Vue podcast. You just don't know it yet. Or maybe you do. Welcome, to another episode. And today, we discuss Vue 3.5, the big changes. But before we get into it, who are we? Well, I'm here with Michael Thiessen, an amazing content creator in the Vue ecosystem. He's doing courses and newsletter, blog posts, articles, some video content live