DejaVue

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.

In this episode of DejaVue, Alex and Michael are joined by Vanessa Otto, a Senior Engineer at GitLab and previously being the head of Frontend at Zavvy.

After discussing Vanessa's co-host role in the German Working Draft podcast, it all revolves around the headless editor "Tiptap" in the episode. From hearing why Vanessa chose it instead of other editors and her research around editors, Tiptaps integration with Vue and what the "headless" part of the editor adds to it, over to which use cases are ideal for Tiptap.

And yes, an example repository is included so you can convince yourself of the easiness! Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (00:55) - Guest Introduction
• (04:00) - About the "Working Draft" podcast
• (09:54) - What is Tiptap?
• (12:30) - Is Tiptap framework agnostic?
• (15:38) - The headless part of Tiptap
• (18:38) - Customization as the biggest benefit?
• (23:26) - How Tiptap content is serialized and saved
• (25:25) - Maturity of Tiptap
• (28:03) - Adding own blocks to Tiptap
• (32:01) - Tiptap and Vue principles
• (34:42) - Did the community around Tiptap grew?
• (36:22) - ProseMirror as the base for Tiptap
• (38:50) - Tiptap Extensions - Seamless with Vue?
• (42:48) - Calling Tiptap extensions
• (46:55) - Call to Action: A fun idea for a Tiptap Project?
• (47:09) - Meet Vanessa and Alex in Germany this Autumn!
• (48:22) - Why Vanessa chose Tiptap
• (51:32) - Wrapping Up!

Links and Resources

• 10% discount for the vue.js de Conf in Bonn, Germany with code DEJAVUE
• Working Draft Podcast (German)
• Vannessa's Research/Comparison Table
• Tiptap
• awesome-tiptap
• awesome-vue
• ProseMirror
• Vannessa's Example repo with TipTap and OpenAI

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.

Are you using Nuxt and want to hear some insights you weren't aware of? Perfect! Then this DejaVue podcast episode is what you need. Michael and Alex are going through more than five big tips around Nuxt, from features under the radar over to a big chunk of amazing benefits and why they exist, all from Michael's Nuxt Tips Collection* which releases on Aug 5th (and of course we got a discount code for you)!
In addition, further topics around the vue-based meta framework like the difference between @nuxt and @nuxtjs modules are discussed as well.

Enjoy the episode!

Chapters

• (00:00) - Welcome To DejaVue
• (01:49) - Tip 1 - Disable Nuxt's auto imports
• (03:54) - Opinion on Auto Imports
• (08:12) - Tip 2 - The .nuxtignore file
• (10:06) - Tip 3 - Dedupe data fetching
• (12:04) - Tip 4 - Custom keyed composables
• (17:00) - Tip 5 - Utilizing Layers
• (21:41) - App Config
• (25:50) - Why is app.config.ts an extra file?
• (28:34) - The different types of Nuxt modules
• (36:24) - Why are core modules not part of the core?
• (38:41) - Go and write a module!
• (40:54) - Upcoming Vue.js conference
• (41:34) - More Tips?
• (42:55) - Wrapping Up

Links and Resources

• $10 off for Michael's Nuxt Tips Collection* with this link and the code DEJAVUE (Release on Aug 5th)
• 10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE
• Anthony's Explicit Import ESLint module
• Alex' video about Nuxt Layers
• Dave Stewart's Layers Article
• Michael's Mastering Nuxt article about the different configs in Nuxt 3*
• The Nuxt module list
• Module Authors Guide

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.

After the first part, Michael and Alex continue their conversation with the one and only Evan You, covering the future of the modern JavaScript Framework.

Starting straight with possible plans for Vue 4 to address common pain points and no ETA for the next major, exciting improvements like native CSS Scoping or removing the need for declaring props are discussed (though nothing is set on stone)!

Next, Vue 3.5 and it's current alpha version are on the list. We all look forward to the amazing features in the next minor version, including Lazy Hydration, perf improvements, easier types and also new composables like useTemplateRef.

Eventually, the State of Suspense, Vapor Mode, Volar, and Mobile App Development with Vue are addressed as well.

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue!
• (01:06) - Do you have any plans for Vue 4?
• (02:47) - Ref Unwrapping in objects
• (05:22) - Native CSS Scoping, Signals and Browser range
• (07:12) - Defaulting to script setup and TypeScript
• (11:12) - No prop declaring necessary anymore
• (13:43) - Nothing set in stone for Vue 4
• (14:50) - Vue 3.5 improvements
• (15:50) - Internal type improvements
• (16:33) - Reactive Props Destructure RFC
• (19:31) - useId and useTemplateRef
• (21:00) - Do we still need custom directives?
• (22:06) - Lazy Hydration
• (22:57) - Allowing Hydration mismatches on purpose
• (25:10) - Custom Lazy Hydration Triggers
• (26:18) - Vue 3.5 Alpha
• (26:56) - State of Suspense
• (30:17) - Vapor Mode
• (33:44) - Performance of Vapor
• (35:31) - Volar and the Vue VS Code Extension
• (39:09) - Negativity towards Volar
• (40:18) - Mobile App Development with Vue
• (42:51) - What content would help the Vue community?
• (51:07) - Wrapping up!

Links and Resources

• 10% discount for the vue.js de Conf in Bonn, Germany with code DEJAVUE
• Nuxt UI Pro* - Get 20% off with code LICHTER until July 14th
• Reactive Props Destructure RFC
• Volar
• Vue Language Tools
• Nuxt
• JS Framework Benchmark
• Ecosystem CI (Vue)
• NativeScript
• TailwindCSS
• Kevin Deng (sxzz)
• Anthony Fu
• Daniel Roe

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.

Vue.js can be used in many different ways - with a meta framework, as a plain SPA, via the script tag and also with Inertia! Created in the Laravel ecosystem with adapters for various back- end front-end frameworks, Alex and Michael got a special guest on the episode who couldn't fit better to illustrate what Inertia is capable of.

Joe Tannenbaum, Software Engineer at Laravel and Inertia contributor goes all in-depth on the capabilities of the library, as well as sweet features and changes coming up for the future Inertia v2 release.

Looking for an easy way to write applications? After this episode, you might have found it.

Enjoy the episode!

Our Guest

Joe Tannenbaum

• Website
• Twitter

Chapters

• (00:00) - Welcome to DejaVue
• (00:56) - What is Laravel and when did you got into it?
• (05:40) - Does Laravel has starter kits?
• (07:41) - Laravel Cloud, funding and growth
• (13:22) - What are TUIs?
• (16:37) - What is Inertia?
• (22:15) - How would Authentication work with Inertia?
• (24:01) - Adapters for Phoenix and Rails
• (25:08) - Feature in Inertia version 2
• (32:53) - Breaking changes for v2
• (33:56) - Composition API or Options API?
• (37:27) - What part is the routing layer?
• (38:48) - Further Inertia Helpers
• (41:14) - Inertia's SSR story
• (45:17) - Data fetching
• (46:48) - When not to Inertia?
• (47:45) - How much do you think about Inertia when coding?
• (50:09) - Too many amazing things to use
• (52:20) - Wasn't Inertia "done"?
• (54:23) - Wrapping up

Links and Resources

• Get 15% OFF for your Vue Toronto ticket with code DEJAVUE *
• Jess Archer - "Unveiling Laravel Prompts"
• Joe Tannenbaum - "Terminal UIs"
• Inertia.js
• Laravel
• Livewire

Your Hosts
Alexander Lichter

• Twitter
• YouTube
• Website

Michael Thiessen

• Twitter
• YouTube
• Website

---

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.