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.

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.

This DejaVue episode is special - Alex and Michael meet up with the creator of Vue, Vite and Rolldown, Evan You himself and talk about the last ten years of Vue!

Starting with how Vue.js started as a side project while Evan still worked at Google, Evan shares the story of how Vue.js came to be and how it evolved over the years. Interesting insights, such as why the Composition API was created and which initial problems should be solved with it, are shared in this episode. And to all that, questions from the Q&A were answered as well, touching topics like petite-vue, if and how the Options API will persist and how opinionated Vue.js is.

After an hour of content and insights, the episode ends with a tiny cliffhanger, as Part Two of the conversation covering the future of Vue, possible Vue 4 features, Vapor mode, Vue 3.5 and more, will be released next week!

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue!
• (01:09) - How did Vue.js start out?
• (04:48) - The Initial Version of Vue.js
• (13:42) - Do new Vue users start without a build step?
• (15:02) - Vue's expansion to different use cases
• (18:14) - Is Petite Vue dead?
• (21:03) - Why Vue 2?
• (29:58) - How opinionated is Vue?
• (35:15) - The Transition from Vue 2 to Vue 3
• (36:32) - How did the idea for the Composition API came up?
• (38:24) - Options API vs Composition API
• (44:54) - Will the Options API stick around?
• (46:10) - Overhead of keeping APIs around
• (51:13) - Considering to disable Options API via a flag?
• (53:05) - The former class-based API proposal
• (58:03) - Classes with Vue's reactivity concept
• (59:38) - Whaat, there is a Part 2?

Links and Resources

• Meteor.js
• Knockout
• AngularJS
• Solid
• Ruby on Rails
• Laravel
• HTMX
• Svelte
• Nuxt
• AlpineJS
• Laravel Livewire
• Inertia
• John Resig
• React
• Ember
• Babel
• Axios
• Justin Schroeder
• TC39 Decorators proposal
• vue-facing-decorator

VueUse might be a library known to many Vue and Nuxt developers - and if not, it should be quickly! With over 200 functions, composables and utilities, it provides a "standard composable kit" which Alex and Michael take a look at in this DejaVue episode. And more than that, they also share their favorite composables that they use or learnt a lot from. Definitely do not miss that out and stay for the spoilers at the end.

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (00:45) - An Introduction to VueUse
• (01:59) - How often do you use VueUse?
• (03:50) - Using a library or better to DIY?
• (05:38) - The Reactivity Layer
• (06:43) - Docs, Demos and Source Code
• (09:52) - Composable 1 - useEventListener
• (13:10) - Composable 2 and 3 - useDebounceFn & useThrottleFn
• (17:46) - Composable 4 - useLocalStorage
• (24:00) - Composable 5 - useMagicKeys
• (29:04) - Util 6 - makeDestructurable
• (33:18) - Wrapping up around VueUse
• (34:43) - Nuxt Tips Collection
• (35:33) - SPOILER!!!

Links and Resources

• Nuxt Tips Collection from Michael
• Mastering Nuxt*
• VueUse
• VueDemi
• Slidev
• is-even package
• is-odd package
• Composable 1 - useEventListener
• Composable 2 - useDebounceFn
• Composable 3 - useThrottleFn
• Debounce Vs Throttle
• Composable 4 - useLocalStorage
• Localstorage example from Alex' Website
• Composable 5 - useMagicKeys
• Util 6 - makeDestructurable
• Bonus - createReusableTemplate

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.

Nuxt 4 is cooking for a while and is close to being released soon. An ideal time for a DejaVue episode where Michael and Alex we explore the upcoming major version of the metaframework with the lead of the Nuxt team, Daniel Roe.

After introducing Daniel, we jump into the power of small changes and how Daniel explains his day job to people. We then dive into why Nuxt 4 is being necessary "now", its top priorities, and how to ease any fears about upgrading (don't worry folks!). Eventually, new Nuxt 4 changes and even features, like the improved folder structure will be discussed. As a bonus, Daniel reveals how he got into programming and that we was a real hacker-man early on.

And of course, Daniel reveals when Nuxt 4 will be released in the final minutes, as well as his upcoming Nuxt for React Devs course.

Enjoy the episode!

Chapters

• (00:00) - Getting Started and Guest Introduction
• (02:43) - How do you Describe your Day Job?
• (04:33) - The Power of Small Changes
• (11:50) - April Fools Joke
• (13:02) - Why Nuxt 4 Now?
• (19:00) - The Top Priority for Nuxt 4
• (20:54) - How to reduce the Fear of Nuxt 4?
• (27:48) - Codemods for Nuxt 4
• (29:41) - Experiencing Nuxt 4 Migrations
• (32:02) - New Folder Structure
• (34:06) - Exciting New Nuxt 4 Features
• (36:46) - Compatibility Date
• (44:26) - How did you get into Programming?
• (48:44) - Daniel's Contact with the Vue World
• (52:38) - University Degrees
• (59:42) - Joining the Core Team
• (01:04:28) - How Daniel is Funding
• (01:08:56) - The Freedom of Doing the Things You Enjoy
• (01:12:45) - When will Nuxt 4 be released?
• (01:15:20) - Interesting Projects and Courses of Daniel
• (01:17:25) - Wrapping Up

Links and Resources

• Daniels April Fools Joke (on Twitter)
• Nuxt 4 Migration Guide
• How to Migrate to Nuxt 4 now!
• How Daniel is Funded
• Daniel's React to Nuxt Course

Today on DejaVue, Alex and Michael are joined by Game and Web Developer Eduard But, who created Geotastic - a Vue-based browser game revolving around geographical knowledge and uses Googles Maps and Streetview API! Starting with Edu's background in programming and web development and initial experiences with Vue.js, we dive deep into how it happened he got into Game Development, which multiplayer game he built first and *why* and eventually talk about Geotastic
With more than 1.5 Million registered users, Edu reveals details about the financial model, how he keeps things up and running, challenges while maintaining and which new game mode will come to Geotastic soon!
Tune in to hear all of the above and more.

Enjoy the episode!

Chapters

• (00:00) - Intro and Guest Introduction
• (01:31) - How did you got into Programming and Web Development?
• (03:55) - Did you like being responsible for the "Full Stack"?
• (05:46) - After working at a Media Agency
• (07:55) - First Experience with Vue.js
• (11:55) - Creating the first browser-based Game
• (16:54) - Learnings from building a Multiplayer Game
• (19:20) - Starting Geotastic
• (21:20) - What type of Game is Geotastic?
• (24:22) - Deciding against a Subscription Model
• (28:03) - Differences between Geotastic and GeoGuessr
• (30:53) - Embracing the Community
• (32:49) - How did you use Vue.js to build the Game?
• (35:45) - Technical Challenges while maintaining Geotastic
• (41:36) - Taking a look at the back-end
• (43:38) - Daily Players and Expenses
• (48:36) - "Just do it" mentality
• (51:27) - People asked for Ads 😲
• (53:39) - When will Geotastic Ranked come?
• (57:21) - *SPOILER* - A new game mode
• (59:28) - Wrapping up

Links and Resources

• Edu's first Multiplayer Browser Game
• Edu's first Game played by the RocketBeans (Video in German)
• Geotastic (the Game!)
• Announcement of Geotastic on RocketBeans (in German)
• Geotastic Discord
• Geotastic Instagram
• Pinia
• Vuetify

In this episode of DejaVue, Michael is joined by Matt Maribojoc, better known as LearnVue on YouTube.

While Alex is being absent at VueConf US, Matt and Michael discuss topics around learning and understanding new programming features - from figuring out what the latest features are over to how to properly learn them and eventually teach them to their audience.
Tune into the episode to figure out all of the above, in addition to what level of understanding is "necessary" to teach a certain concepts and why content creation is important for libraries, frameworks and open source in general.

Enjoy the episode!

Chapters

• (00:00) - Guest Introduction - Matt Maribojoc
• (02:41) - Where and How to Learn New Concepts or Features?
• (08:50) - How to Explore a New Feature?
• (19:42) - The Level of Understanding for Teaching
• (25:38) - Importance of Content for Frameworks and Open Source
• (31:57) - The Platform Question: YouTube Videos vs. Blog Posts
• (36:57) - Sharing and Spreading Knowledge of Others
• (43:27) - Wrapping up

Links and Resources

• Nuxt Server Components
• DejaVue #E006 about Server Components with Julien Huang
• Vue Vapor Mode Repository
• Michael's Clean Components Toolkit (35% off until June 8th)
• The Feynman Technique
• Matt's Video about magic-regexp

Michael is back from his paternity leave! And he brought three Design Patterns in Vue.js which he and Alex discuss in the 10th DejaVue Episode! Learn more about what Design Patterns are and what the three shown patterns do, when they should be used and which downsides they could bring.

Enjoy the episode!

Chapters

• (00:00) - Welcome Back Michael!
• (01:42) - What are Design Patterns?
• (04:20) - Design Pattern One - Thin Composables
• (11:07) - Design Pattern Two - Data Store
• (19:22) - Design Pattern Three - Preserve Whole Object
• (27:33) - Wrapping up

Links and Resources

• DejaVue #E008 - Vue.js Amsterdam
• Check out Michael's Clean Component Toolkit - 35% OFF from June 5th to 8th
• Pinia
• Cross-Request State Pollution
• Prop Stability