DejaVue

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 DEJAVUEDejaVue #E015 with Evan YouPetite Vue TalkDebugging Guide: Why Your Vue Component Isn't Updating (and how to fix it)Marc Backes - Building a Time Machine with ProxiesCanIUse Beowser Usage StatsMichael Thiessen on ref vs. reactiveAlex's shallowRef guideAlpine.jsReactivue - Vue CAPI in React 👀Arrow-jsVapor Mode RepoVapor Mode PlaygroundLinks 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 DEJAVUE10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEGitLabDejaVue Episode with VanessaOptions API vs Composition APIOrganizing Composition API CodeBootstrap VueIlya KlymovBootstrap Vue NextLinks 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.

Discover essential Nuxt tips that can elevate your development game. Learn how to manage auto imports for better code control and optimize your build process with the '.nuxtignore' file. Delve into efficient data fetching strategies and the significance of custom keyed composables. Explore the advantages of using layers to enhance code organization and navigate the complexities of configuration options and available modules. Plus, get insights on community engagement and upcoming events related to Vue.js!

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 Resources10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEE016 - 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 issueWIP Code modLinks 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.

Vanessa Otto, a Senior Engineer at GitLab and former Head of Frontend at Zavvy, dives into the innovative rich text editor Tiptap. She shares why Tiptap's headless design is a game-changer and how it integrates seamlessly with Vue.js. Vanessa explains its customization benefits, hierarchical content structure, and collaboration features that enhance user experience. Listeners will also learn about creating tailored functionalities and the potential for Tiptap's future, including community engagement and upcoming AI integrations.

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 Resources10% discount for the vue.js de Conf in Bonn, Germany with code DEJAVUENuxt UI Pro* - Get 20% off with code LICHTER until July 14thReactive Props Destructure RFCVolarVue Language ToolsNuxtJS Framework BenchmarkEcosystem CI (Vue)NativeScriptTailwindCSSKevin Deng (sxzz)Anthony FuDaniel RoeLinks 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.

Evan You, creator of Vue, Vite, and Rolldown, shares the journey of Vue.js from a side project to a comprehensive framework. Topics include the Composition API, Vue 2's development, Options API vs Composition API, sustainability of PetitVue, and the transition to Vue 3. Insights on Vue's evolution, lightweight alternatives, and the shift towards single-page applications are also discussed.

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 ResourcesNuxt Tips Collection from MichaelMastering Nuxt*VueUseVueDemiSlidevis-even packageis-odd packageComposable 1 - useEventListenerComposable 2 - useDebounceFnComposable 3 - useThrottleFnDebounce Vs ThrottleComposable 4 - useLocalStorageLocalstorage example from Alex' WebsiteComposable 5 - useMagicKeysUtil 6 - makeDestructurableBonus - createReusableTemplateLinks 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 Daniel Roe, team lead of Nuxt.js and an open source wizard, as he unravels the excitement around the soon-to-be-released Nuxt 4. He discusses how small contributions can lead to significant impacts within the community and shares strategies for easing the upgrade process. The conversation dives into new features like an improved folder structure and the importance of community feedback. Plus, hear about Daniel's journey into programming and his passion for fostering collaboration within the Vue ecosystem!

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 GeotasticWith 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 ResourcesEdu's first Multiplayer Browser GameEdu's first Game played by the RocketBeans (Video in German)Geotastic (the Game!)Announcement of Geotastic on RocketBeans (in German)Geotastic DiscordGeotastic Instagram PiniaVuetify