DejaVue

This DejaVue episode is a world premiere, with having  two guests on the episode for the first time! And not only that, the topics are exciting too. Michael and Alex are joined by Dan and Zoey, both working at SIDESTREAM, an agency using Vue and Nuxt to realize projects.

But besides the project business, they also have Sidebase, a non-profit "spin-off" responsible for open-source Nuxt modules like @sidebase/nuxt-auth which some of you might know already!

Listen to the discussion around how doing Open Source benefits SIDESTREAM, how the Vue job market and hiring works, why Vue and Nuxt were chosen first of all and all around Nuxt Auth and further modules. Enjoy the episode! 

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (01:37) - Sidebase vs SIDESTREAM
• (03:57) - How did you choose Vue and Nuxt?
• (08:21) - Do clients care about your tech stack?
• (10:31) - Finding Vue.js Developer to Hire
• (14:35) - What brought SIDESTREAM to open source?
• (18:45) - Developing Sidebase - From template to starter
• (22:11) - Which choices Sidebase offer?
• (26:03) - The case against wrapper packages
• (28:57) - How did SIDESTREAM benefits from Sidebase?
• (33:17) - Inspired by Open Source
• (37:42) - Influence from previous projects on Sidebase
• (40:33) - Moving from Python to full-tack TypeScript
• (45:48) - Separate services or one Nuxt application?
• (49:47) - The Sidebase Nuxt Auth Module
• (54:14) - Migrating the base of Nuxt Auth to Auth.js
• (56:02) - Other Auth solutions
• (01:02:37) - Dead ends during module development
• (01:07:48) - The future of Sidebase and SIDESTREAM
• (01:15:10) - 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

• DejaVue #E015 - Ten Years of Vue (with Evan You)
• SIDESTREAM
• Sidebase
• Sidebase Promo Video
• Sidebase Launch Tweet
• Nuxt CLI Wizard
• Prisma
• tRPC
• Sidebase nuxt-auth module
• Sentry
• Sentry Nuxt SDK Alpha
• Add Sentry to Nuxt 3 recipe
• Nuxt Layers Intro
• Zod
• Auth.js
• nuxt-auth-utils
• MakerDAO aka Sky

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 episode of DejaVue includes not only knowledge but also a certain degree of magic, as Alex and Michael meet up with the one and only TypeScript Wizard Matt Pocock. Together, they talk about how he became a full-time educator and what the pros and cons are, then of course discussing everything around TypeScript - from Types vs. Interfaces, any vs. unknown, Matt's ts-reset library, Flappy Bird in TypeScript and more amazing nuggets

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue
• (02:08) - How Matt came to join DejaVue
• (03:03) - Becoming a full time TypeScript educator
• (05:10) - What do you miss when doing full time content creation?
• (08:16) - Being an employee vs. self-employed
• (14:42) - Why using TypeScript?
• (19:59) - TypeScript only for libraries?
• (22:40) - Migrating JS to TS
• (28:08) - The build/compile step
• (33:20) - Types vs. Interfaces
• (37:19) - Declaration Merging pitfalls
• (41:35) - TS Reset and TS 5.5 improvements
• (48:25) - TypeScript enforcing a way of programming
• (51:18) - any vs. unknown
• (54:25) - 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

• Matt's Truck stream
• Badass.dev
• NeverThrow
• Sentry migrating to TS
• Stripe migrating to TS
• TS Reset
• Dan Vanderkam's PR to TS
• TS Flappy Bird
• Total TypeScript

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.

It was teased in the last episode already and here it - Michael and Alex talk about the current hype in the front end development community: Signals. But if you as a Vue developer don't feel hyped around it and maybe even didn't hear much around it, fear no more - that is normal and will be explained in the episode too.

Join the two Vue experts covering the history of Signals, what's behind the term and how they work in Vue.js and other major frameworks.
And of course, the TC39 proposal to add Signals to the language itself wasn't forgotten either.

Enjoy the episode! 

Chapters

• (00:00) - Welcome to DejaVue
• (01:06) - Signals and Reactivity
• (04:41) - Functional Programming
• (10:51) - Signals in Modern Frameworks
• (11:48) - How Signals look like in other Frameworks
• (14:20) - Signals in Vue
• (15:20) - Signals vs. refs?
• (17:51) - A Standard for Signals
• (21:54) - Benefits of Signals in the language
• (25:16) - Vue.JS DE Conf 2024

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

• DejaVue #E022 - Reactivity in Vue
• Haskell
• OCaml
• Elixir
• Elm
• Zod
• Valibot
• Solid.js
• Building solid-like Signals in Vue with shallowRef
• Vue Docs on Signals
• TC39 Proposal
• 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.

Join Alex and Michael on a talk about a key topic in Vue.js - the reactivity system. Before diving into how it works in Vue 3, reactivity in Vanilla JS is covered. Then, the differences between the major Vue versions are discussed, showing an astonishing evolution in terms of DX but also performance when it comes to reactivity.
Of course, the ref vs reactive topic can’t be left out, and neither can signals and vapor mode.
Sounds interesting? Then tune in!

Enjoy the episode! 

Chapters

• (00:00) - Welcome to DejaVue
• (01:38) - What is Reactivity in general?
• (03:47) - Reactivity in JavaScript?
• (07:45) - Reactivity in Vue 1
• (09:08) - Changes to reactivity in Vue 2
• (10:47) - Reactivity system and caveats in Vue 2
• (15:10) - Vue 3 Reactivity with Proxies
• (19:00) - No IE11 support
• (20:22) - Ref and Reactive in Vue
• (25:12) - shallowRef, triggerRef and more
• (28:23) - Why not shallowRef by default?
• (31:24) - Vue's reactivity system as a standalone package
• (34:21) - Vapor Mode
• (40:52) - 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

• DejaVue #E015 with Evan You
• Petite Vue Talk
• Debugging Guide: Why Your Vue Component Isn't Updating (and how to fix it)
• Marc Backes - Building a Time Machine with Proxies
• CanIUse Beowser Usage Stats
• Michael Thiessen on ref vs. reactive
• Alex's shallowRef guide
• Alpine.js
• Reactivue - Vue CAPI in React 👀
• Arrow-js
• Vapor Mode Repo
• Vapor Mode Playground

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.

For the 20th episode we surprise you with a "in-person" podcast episode! 

Alex is joined by Principal Engineer and Vue Core Team Member Natalia Tepluhina to talk about two important topics - Documentation and the Migration from Vue 2 to Vue 3. 

Learn in this episode what Natalia does in the core team, how difficult writing docs is and how to improve your doc writing skills. Also, gain insights in how GitLab's migration from Vue 2 to Vue 3 is going and get invaluable tips if you also have to migrate a project over!

Enjoy the episode!

Chapters

• (00:00) - Welcome to DejaVue!
• (01:32) - When did you start using Vue.js?
• (02:42) - How could you introduce Vue at work?
• (04:43) - Joining GitLab
• (07:15) - Getting into public speaking
• (10:05) - Memorable moments as a speaker
• (16:22) - Moving to Amsterdam
• (18:22) - Being part of the Vue.js Core Team
• (20:27) - (Not) Documenting Vue Methods
• (22:21) - $parent in Vue 2
• (22:59) - AI as the new docs?
• (25:00) - Regular Contributors to the Vue docs
• (26:14) - Is writing docs is easy?
• (31:45) - Documenting Vue 3 at release
• (34:04) - Documentation as a garden
• (37:00) - Separating Options and Composition API docs
• (38:20) - Preferring the Options API for huge teams?
• (41:49) - Inline Composables and other architectural patterns
• (45:35) - Overusing Watchers
• (46:57) - People - Share your thoughts and patterns!
• (48:39) - Vue.js DE Conference
• (49:14) - Migration from Vue 2 to Vue 3
• (50:10) - How the component library blocks migration
• (54:10) - Updating Unit tests during migration
• (55:16) - No CAPI during migration
• (57:13) - Migration of big old projects
• (58:45) - Responsibility of library authors
• (01:05:01) - Vue 3 Breaking changes
• (01:06:31) - Will the migration ever end?
• (01:07:48) - Other tips for migrating
• (01:09:19) - Migrating without tests
• (01:10:45) - Rewrite vs Migration?
• (01:11:35) - Not migrating at all?
• (01:13:54) - No CAPI during migration?
• (01:15:58) - New questions with CAPI
• (01:16:58) - Natalia back on stage at a conference?
• (01:18:16) - What could the Vue team have done better?
• (01:20:21) - Nuxt Tips Collection
• (01:21:00) - 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

• GitLab
• DejaVue Episode with Vanessa
• Options API vs Composition API
• Organizing Composition API Code
• Bootstrap Vue
• Ilya Klymov
• Bootstrap Vue Next

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.

In this episode of DejaVue, Alex and Michael talk about the previous "IRL Nuxt event", which was a team meeting where most Nuxt Core Team members met in France.

Together, they discuss why they met, what happened, why there was a delicious cake and further insights from the retreat, like more breaking changes to Nitro and Nuxt, codemods and other topics.

Enjoy the episode! 

Chapters

• (00:00) - Welcome to DejaVue
• (01:04) - A real life Nuxt team meeting?
• (02:44) - Who was at the meeting?
• (04:11) - A cake?
• (05:54) - Activities
• (09:37) - How DejaVue came to life
• (10:37) - Previous Vue Podcasts
• (11:57) - Vue.js Australia?
• (12:20) - Meetups
• (13:23) - Further activities
• (14:46) - Nitro breaking changes
• (16:06) - Nuxt breaking changes
• (18:36) - Meeting IRL more often?
• (19:44) - Wrapping up

Links and Resources

• 10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUE

• E016 - The Future of Vue.js (with Evan You)
• E013 - The Road to Nuxt 4 (with Daniel Roe)
• E006 - Nuxt Server Components (with Julien Huang)
• Nuxt pending vs. status issue
• WIP Code mod

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.

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

In DejaVue episode number nine, Tim Benniks joins Alex discussing how he used Vue in huge applications and how Tim and his team built 3000 websites for a single brand that most of you know - Louis Vuitton.

In addition, Tim shares his journey from becoming a nurse to eventually learn web development. Learn which benefits Vue brought compared to the old jQuery application, how Tim and his team migrated a huge system step by step and more!

Enjoy the episode!

Chapters

• (00:00) - Start and Guest Introduction
• (01:34) - From becoming a Nurse to becoming a Developer
• (06:49) - Building Social Network before Facebook
• (10:33) - Getting into Vue.js and Abandoning jQuery
• (16:01) - Reducing Bugs with Vue.js
• (19:33) - Accessibility - Reaching AA or AAA
• (26:16) - Balancing the Stakeholder Needs
• (30:39) - 3000 Websites with Vue.js for one Company
• (32:49) - Building your own Component Library?
• (35:40) - Cleaning up Technical Debt at Louis Vuitton
• (38:23) - Gradually upgrading legacy LV software
• (43:43) - Why not React or Angular?
• (52:40) - Mitosis
• (55:13) - Outro

Links and Resources

• Tim's episode on the "We Belong Here" podcast
• Episode #E001 The Need for SSR
• Grunt
• Gulp
• WCAG for Accessibility
• Vue Route Announcer
• Route Announcer in Nuxt
• Knockout.js
• Accessibility Needs Overview
• Partytown
• CloudFlare Zaraz
• Episode #E007 From Code to DevRel and Leadership
• Tim's "Team First" Talk
• Storybook
• Migrating to Nuxt 4 Now?!
• Tim's "A Vue into Rock & Roll Part 2" talk
• Mitosis

Welcome to the eighth episode of DejaVue! In this episode, Alex and (past) Michael recap the highlights of Vue.js Amsterdam, one of the largest Vue.js conference. They discuss the amazing talks, including Evan You's keynote on the 10-year journey of Vue, exciting announcements like NuxtHub, and memorable moments from the conference. They also share their experiences of connecting with the community, live coding challenges, and the unique vibe of this must-attend event.

From FOMO over to talk highlights and next upcoming conferences, all is packed in the 28-minutes.

Enjoy the episode!

Chapters

• (00:00) - Introduction
• (00:48) - Vue.js Amsterdam FOMO
• (02:50) - Giving a talk at a huge conference
• (06:59) - Highlights from 2024
• (08:56) - Evan's talk
• (12:56) - Further Highlights of Day One
• (15:48) - Pooya's talk
• (17:24) - Speed review
• (19:15) - Networking at conferences
• (22:40) - DevWorld + Front end panel
• (25:55) - Upcoming conferences

Links and Resources

• Vue.js Amsterdam 
• Talk Replays
• Alex's Petite Vue Talk
• Vapor Mode Repository
• Vapor Mode Playground
• Partykit
• DevWorld Conference
• Frontend Panel
• VueConf Toronto
• vue.js DE Conf

In the seventh episode of DejaVue, Alex sits down with Team Lead Marc Backes as our guest. Our conversation takes us on a journey through his career with Programming and Vue.js. Marc shares the beginnings of his coding journey, from the development of Software for a Mexican University and lessons learned from founding a startup and eventually joining a German company as freelance developer.

We also dig deeper into the world of Developer Relations (DevRel) and talk about Marc's transition into this field, as well as major achievements such as the CODE100 Coding Competition and the importance of ambassadors for frameworks such as Vue and Nuxt.

Further, Marc sheds light on his decision to leave DevRel and becoming a Tech Lead at the company he's been with twice beforehand. We explore how this transition addressed certain pain points and dive into practical strategies for handling legacy code and technical debt.

Enjoy the episode!

Chapters

• (00:00) - Intro
• (01:04) - Public Speaking and Conferences
• (03:15) - The Start of Marc's Coding Journey
• (06:49) - Building University Admin Software
• (09:42) - Startup Founding Lessons
• (13:27) - How the Journey Continued
• (20:40) - What is DevRel?
• (21:52) - Getting into DevRel
• (24:22) - Developer Advocate vs Developer Relations
• (27:20) - "Framework DevRels" and Ambassadors
• (29:38) - CODE100 Coding Competition
• (35:42) - Why leaving DevRel?
• (38:28) - Becoming a Tech Lead
• (41:44) - Did the role change solve the pain points?
• (46:57) - How do you handle legacy code and technical debt?
• (52:01) - Widen/Narrow approach for migrations
• (54:20) - How to please the developer and the business side
• (58:42) - Carté blanch for team managing
• (01:02:30) - Wrapping it up

Links and Resources

• dotJS Paris
• Vue.js Amsterdam
• VueConf US
• Ruby on Rails
• Vue Storefront / Alokai
• CODE100 Competition
• Syntax FM

Welcome to the sixth episode of DejaVue! Alex is joined by another amazing guest - he is a Front-end Developer, Public Speaker and also part of the Nuxt.js core team - Julien Huang.

While Michael is still off on paternity leave, Julien and Alex talk about how Julien started to code (during COVID 😲) and when he dabbled into open source, which culminated in joining the Nuxt team and regularly contributing.
One of the key feature that Julien is working on are Server Components - so of course the rest of the episode revolves around them. What are they? How do they work? And when should you use them? Julien will go in-depth on all these questions, give some behind the scene looks and "do's and don'ts" advice too!
Eventually, the future of Server Components is discussed.

Enjoy the episode!

Chapters

• (00:00) - Intro and guest introduction
• (00:50) - Julien's day job
• (02:31) - His programming journey
• (10:28) - Getting into Open Source
• (15:47) - What are Nuxt Server Components?
• (17:37) - When would you use Server Components?
• (20:27) - Server Components and interactivity
• (26:55) - How are Server Components handled on the client side?
• (30:21) - Does Static Site Generation (SSG) work with Server Components?
• (32:43) - Why are Server Components still experimental?
• (35:02) - Remote Component Islands
• (38:32) - The future of Server Components
• (44:38) - Julien's thoughts on React's vs Vue's Server Component approach
• (47:53) - Outro

Links and Resources

• Open Classrooms
• Analog's (Angular) SFC proposal
• Julien's first module to enable the runtime compiler
• Faster Nuxt Builds with the Build Cache Module
• Server Component Docs
• 414 - URI Too Long
• The NuxtIsland component
• Our Nuxt Contribution Guide
• Island Architecture
• Astro
• Server Only Pages
• Inertia.js
• Nuxt.js Discord

Welcome to the fifth episode of DejaVue! While Michael is on paternity leave after becoming a father, Alex is joined by a special guest, Patrick van Everdingen, Full Stack Developer, Speaker, Panel Host an Co-Founder of CareerDeck.

In this episode, we talk about how Patrick started his Vue- and Nuxt-based side project, CareerDeck - and how it grew from an idea at a pool in Italy to a full-fledged application. From the initial idea to the current state of the application, we discuss the tech stack, the challenges, and also the future of CareerDeck.

Learn why Patrick chose Vue and Nuxt, why decided to rebuild the application again and how he uses AI to create real value for the users of CareerDeck.

Eventually, Patrick turns the tables and asks Alex about his thoughts on the future of Nuxt and how it compares to other frameworks like Laravel or NestJS, as well as the role of plain Vue in the ecosystem.

Enjoy the episode!

Chapters

• (00:00) - Chapter 1
• (00:00) - Intro
• (01:29) - The backstory of CareerDeck
• (06:17) - What makes CareerDeck more than just a GPT wrapper?
• (11:00) - Rebuilding the application again with Nuxt UI
• (14:39) - The tech stack of CareerDeck
• (19:29) - Building a job interview simulator
• (25:07) - What are Server-Sent Events?
• (26:47) - The difference between WebSockets and Server-Sent Events
• (29:38) - Implementing SSE with Nitro
• (31:59) - New folder structure in Nuxt 4
• (34:02) - How does Nitro compare to other frameworks?
• (36:14) - Will Nuxt be the next Laravel or NestJS?
• (41:17) - Why would you choose vanilla Vue over Nuxt?
• (47:06) - Your benefits as a newcomer to a framework
• (49:44) - Where can people reach Patrick
• (51:22) - Outro

Links and Resources

• Devworld Conference
• CareerDeck
• Nuxt
• DejaVue Episode #002 with Harlan Wilton
• Nuxt UI Pro* - GET 20% OFF WITH THE CODE "LICHTER" until the end of the month!
• LangChain 
• Llama3
• Nitro
• DejaVue Episode #003 about Nitro
• No gist but H3 Docs on SSE
• WebSockets in Nitro
• Nuxt vs. Nitro
• Improved Nuxt folder structure issue
• Laravel
• Inertia.js
• Laravel Livewire
• Unplugin

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.

Welcome to the fourth episode of DejaVue! From a Nuxt topic last week, Michael and Alex jump into a plain Vue.js topic again, or would you say... teleport?
Yes, correct! The Teleports feature from Vue 3 will be explored - from its use cases to the native HTML dialog tag. The two hosts also cover how Teleports were created, even back in Vue 2, and talk about a Nuxt implementation too.

Learn more about Teleports in this episode of DejaVue!

Post-podcast note: The Popover API is now available in all major browsers!

Chapters

• (00:00) - Intro
• (00:35) - What are Teleports?
• (01:35) - The typical Teleport use case
• (03:23) - Other use cases for Teleports (1)
• (06:45) - Async Components and Suspense (1)
• (07:48) - Pitfalls with Teleports
• (09:15) - The native dialog components
• (12:14) - Building an own modal / dialog
• (13:25) - How you did it before Teleports
• (14:33) - What Teleports don't solve
• (15:13) - Other use cases for Teleports (2)
• (16:46) - Teleport targets / Where to teleport
• (17:49) - Vue 2 Teleports
• (19:04) - Teleports and SSR
• (25:13) - Creating Reproductions and Open Source
• (29:28) - Outro

Links and Resources

• Teleports Vue.js Docs
• Headless UI
• The Dialog Element
• Popovers (Now available)
• Portal Vue package (needed in Vue 2)
• Evan You on SSR Teleports
• #teleports in Nuxt
• Suspense + Teleports Issue

Welcome to the third episode of DejaVue! After talking about an open source SaaS the last time and hearing a lot about Nitro, Alex and Michael dive deeper into the server framework which powers not only Nuxt but also other frameworks like Analog or SolidStart. Learn more about what Nitro is, the difference between Nuxt and Nitro and amazing features it offers, no matter if you use it standalone or with Nuxt.

Chapters

• (00:00) - Intro
• (00:47) - Nitro and UnJS
• (02:38) - Nitro powering different Frameworks
• (04:16) - Where does Nuxt end and Nitro start?
• (06:20) - KV Storage in Nitro - unstorage
• (10:20) - Database Integration via db0
• (10:52) - Nitro Tasks API
• (13:57) - Framework and Runtime agnostic
• (15:14) - Further Nitro features
• (15:32) - Nitro vs. Nuxt (continued)
• (17:45) - $fetch emulating nested calls to Nitro
• (19:34) - Compare Nitro to other frameworks such as Hono or Express
• (23:44) - Outro

Links and Resources

• Nitro
• UnJS
• Analog
• SolidStart
• Vite
• Volar (Vue Language Tools)
• Nuxt vs. Nitro explanation video
• DejaVue Episode #001 - The Need for SSR
• unstorage
• db0
• Tasks API tracker
• Tasks DevTools Panel PR
• Integrating WebSockets with Nitro video
• h3

Welcome to the second episode of DejaVue - and the first one with a guest! Michael and Alex are joined by Harlan Wilton, an open-source developer from Sydney, Australia who is not only into backpacking and Nuxt.js but also builds amazing tools and applications. Harlan is discussing with Alex and Michael how he built his SaaS Request Indexing in less than a week with Nuxt, which stack he used exactly, what it does and shares tips on how to stay focused and make sure your app actually ships.

The best? The SaaS is open-source!

Tune in for an interesting conversation around using Vue.js and Nuxt.js in the wild.

Post Podcast Update from Harlan

After the recording, Harlan took a break from working on Request Indexing due to other commitments. But there is also a good news - Request Indexing got the first paid monthly users now netting $60 per month. Harlan is also working on a big pivot on it, which will be announced soon. Stay tuned!

Chapters

• (00:00) - Intro
• (01:00) - Open-source and backpacking
• (02:22) - The idea for an open-source SaaS
• (06:09) - Staying sane while building the app in 64 hours
• (09:58) - Harlan's Tech Stack to build the SaaS
• (15:24) - The back-end of Request Indexing
• (21:32) - Next steps for the SaaS
• (22:30) - Keeping the scope when building a SaaS
• (32:37) - Wrapping up

Links and Resources

• Harlan's SaaS - Request Indexing
• Harlan's Website
• Reach out to Harlan on Twitter
• Social Media Scheduling Nuxt SaaS*
• AI Headshot Photo Nuxt SaaS*
• Nuxt UI Pro*
• Nuxt SEO Modules (maintained by Harlan)
• Nitro
• Handle Sessions in Nitro/H3
• Tailwind CSS
• Nitro Tasks API (experimental)
• UnJS Organization
• The nuxt-auth-utils module

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.

The very first episode of DejaVue is here! In this episode, Michael and Alex talk about Server-Side Rendering (SSR) and its benefits, use cases, and challenges. After understanding what SSR actually is and why it could be useful, rendering modes like Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are discussed, as well as compared to dynamic SSR. The episode closes with a summary of the discussed topics and a brief outlook.

Chapters

• (00:00) - Intro
• (00:50) - What is Server-Side Rendering (SSR)
• (05:44) - When would you recommend using SSR
• (08:46) - Performance benefits with SSR and Hydration
• (14:39) - Complexity with Server-Side Rendering
• (17:21) - Static Site Generation (SSG) vs. SSR
• (27:53) - Incremental Static Regeneration (ISR)
• (34:11) - Summary

Links and Resources

• Remix & PESPAs 
• React Server Components
• Nuxt Server Components
• Hybrid Rendering in Nuxt
• Alex' slides about Hydration
• Island Architecture
• Astro
• Îles
• Vike fka. vite-plugin-ssr
• Quasar
• Caching with Nitro (ISR/SWR)

DejaVue - Your favorite Vue podcast - you just don't know it yet!
Join Michael Thiessen and Alexander Lichter in this first trailer to find out who will guide you through the Vue and Nuxt journey in the upcoming weeks.

 Follow DejaVue on: 
* Web - https://dejavue.fm/ 
* Apple Podcast - COMING SOON ;)
* 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 

Follow Michael Thiessen on:
* Twitter - https://twitter.com/MichaelThiessen/
* Web - https://michaelnthiessen.com/ 

Follow Alexander Lichter on:
* YouTube - https://www.youtube.com/@TheAlexLichter
* Twitter - https://twitter.com/TheAlexLichter
* Web - https://www.lichter.io/