DiscoverDejaVue
DejaVue
Claim Ownership

DejaVue

Author: Alexander Lichter & Michael Thiessen

Subscribed: 15Played: 204
Share

Description

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.
35 Episodes
Reverse
Data fetching is a crucial part of any web application. In this episode of DejaVue, we discuss the different ways to fetch data in Vue.js and Nuxt.js, and how to cache it. We also talk about the experimental Suspense feature in Vue.js and how it can be used to improve the user experience, as well as how to handle third-party scripts in your application.In addition, Nuxt's data fetching options are discussed, including the $fetch method, useFetch, useAsyncData and the useNuxtData composable. Finally, we cover server-side caching in Nuxt.js, including route rules, defineCachedEventHandler, and defineCachedFunction.Enjoy the episode! Chapters(00:00) - Welcome to DejaVue (00:50) - Which topics should be covered next? (01:56) - This episodes topic - Data Fetching (04:13) - Two ways of client-side caching (06:17) - What is Data Fetching actually - and which library to use? (08:19) - Suspense in Vue.js (14:03) - Third Party Scripts (17:38) - Data fetching basics in Nuxt.js (20:28) - $fetch vs useFetch (23:27) - $fetch request deduplication on the server (24:43) - Caching in Nuxt.js (28:18) - routeRules of server-side caching (29:38) - defineCachedEventHandler / defineCachedFunction (32:19) - Unstorage for storing the cached files (35:41) - useNuxtData (40:26) - Why does Nuxt offer more data fetching options? (45:32) - Wrapping up Links and ResourcesLAST CHANCE 15% discount for the VueConf Toronto* with code DEJAVUEofetchkySuspense in VueData LoadersDejaVue #E030 - Pinia and Data Loaders (with Eduardo San Martin Morote)nuxt-workersPartytownsquoosh.appDejaVue #E001 - The Need for SSRYou are using useFetch wrongDejaVue #E003 - Nitro: The Next Generation Server ToolkitCaching in NitroClient side caching with getCachedDataComposable Caching Utils issueRoute Rules in NuxtDejaVue #E002 - Building a Nuxt.js SaaS in less than a week (with Harlan Wilton)Your HostsAlexander LichterBlueSkyTwitterYouTubeTwitchWebsiteMichael ThiessenTwitterYouTubeWebsiteLinks 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.
Alex is accompanied by the wonderful CJ Reynolds in this episode of DejaVue. The Senior Creator at Syntax.fm brings not only Vue experience but also a history of Angular JS and React, as well as various other technologies.The two content creators talk about how CJ became a senior creator at the well-known Syntax.fm podcast and how it is different from Streaming on Twitch and his previous content creation processes. Further, CJ gives insights on how the Denver Vue meetup evolved (now the DenverScript meetup) and shares some hopes when it comes to the meetup scene.Alex and CJ then discuss more technical topics - for example why CJ never fully switched over to Vue but still writes it a lot. The discussion eventually goes into comparisons between Vue and React, highlighting what Vue does "better" than React and how the Vue ecosystem shapes the web development work.Enjoy the episode!Our GuestCJ ReynoldsOwn WebsiteSyntax WebsiteTwitchYouTube (Coding Carden)YouTube (Syntax.fm)BlueSkyTwitterChapters(00:00) - Welcome to DejaVue (00:47) - How CJ joined the podcast (01:38) - How did you become the Senior Creator at Syntax.fm do? (06:00) - Differences to previous gigs and streaming (12:17) - From starting with web development to Vue.js (15:54) - Running the Vue Denver meetup (19:25) - Is the meetup scene growing again? (21:13) - Why didn't you switch fully to React? (23:49) - What Vue does "better" than React (27:01) - Two-way data binding (31:35) - How opinionated is Vue (32:58) - Vue without a build step (35:01) - Does Vue "seem" too magical? (36:07) - "Needing" a meta framework? (38:50) - Nuxt and the UnJS packages (41:01) - Frameworks converging (41:55) - Vue did Signals "first" (42:58) - Is Vue bad at marketing? (44:40) - Vue Job market (45:40) - Vue and Innovation (46:59) - Vue being left out of the conversation (50:52) - What stops from switching to Vue? (53:52) - The change to Vue 3 and the Composition API (01:02:38) - VueUse as a good example (01:03:26) - Composition API without script setup (01:05:56) - Where people can follow CJ (01:06:34) - Wrapping up Links and ResourcesGet 15% OFF for your Vue Toronto ticket with code DEJAVUE *Syntax PodcastDenverScriptimmerImmutable.jspetite-vueEpisode 16 - The Future of Vue.js (with Evan You)vinxiEpisode 30 - Pinia and Data Loaders (with Eduardo San Martin Morote)Vue Data LoadersNitroInterview with Evan You about VoidZeroSyntax Video Series -  React vs VueHeadless UIFormKitOrganizing Code when using the Composition APIYour HostAlexander LichterBlueSkyTwitterYouTubeTwitchWebsite---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, Michael is joined by special guest Simone Cuomo. Together, they discuss how to "get started" with Vue and also topics around general developer culture, such as in-office vs. remote work and the power of mentorship.Simone also shares learnings and insights from the recent Vuejs.de Conference - as well as his hot take about Vue.js (Hint: it is related to the Composition API!)And of course, recent topics like AI and whether it is good or bad for beginners shouldn't be left out either.Enjoy the episode!Our GuestSimone CuomoWebsiteTwitterChapters(00:00) - Welcome to DejaVue (01:51) - Experience with in-office work (07:20) - Mentorships (11:57) - Job-ready after university (18:37) - Learnings from the Vuejs.de Conference (24:27) - Simone's Hot Take on Vue.js (31:12) - Getting Started with Vue.js (38:30) - Tip for reading complex library code (39:35) - Is AI helpful for junior developers? (49:07) - Wrapping Up Links and ResourcesGet 15% OFF for your Vue Toronto ticket with code DEJAVUE *GitKrakenVuejs.de Conf PanelVueUseSimone's new book - Vue.js 3 for BeginnersSimone's first book - Beyond codingWhat is a composableYour HostMichael ThiessenTwitterYouTubeWebsite---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.
As a special DejaVue episode - Alex met up with with the creator of Vue, Vite and founder of VoidZero Evan You himself and discuss his new company and the vision of a unified toolchain.Starting with how the idea of VoidZero came up and finding the right investors went, further discussion revolve around the monetization and why VC money was the way to go instead of other models, such as the sponsorship model of Vue, OpenCore or similar.Also, we cover a lot of community questions, such as whether Next.js will support Vite in the future, what lessons Evan and team learned from other projects like Rome and when we see the first Vite version with Rolldown.Enjoy the episode!Chapters(00:00) - Welcome to DejaVue (00:26) - What is VoidZero? (01:09) - When did you have the idea for VoidZero? (05:16) - Limits of Vue's funding model (07:10) - When did you found VoidZero? (09:20) - The name VoidZero (11:25) - What is open source will stay open source! (11:54) - Who is on the VoidZero team? (14:56) - VC Funding for VoidZero (18:12) - Picking the right investors (19:34) - The solved Zero to One Problem (21:05) - NPM download as metric (22:02) - Other company models for VoidZero (28:18) - Lessons Learned from other "unified JS toolchain projects" (33:21) - Feedback from framework authors (34:28) - VoidZero and runtime-agnosticism (37:35) - Projects close to what VoidZero should become? (38:14) - Upcoming projects which will be integral for VoidZero (39:50) - The Monetization of VoidZero (41:55) - Monetizing a toolchain (43:15) - Are planned services relevant for hobby devs? (44:12) - How do you plan to divide the funds? (44:50) - Vue as first class citizen (48:48) - Impact of VoidZero on time for Vue and Vite (55:37) - Relationship between VoidZero and UnJS (56:55) - .config proposal (57:39) - Migration path from tools like SWC or esbuild (59:27) - When Next.js will support Vite? (01:01:34) - oxc-lint and stylistic rules (01:02:42) - Collaboration with the TypeScript team? (01:03:04) - TypeScript Checking in VoidZero? (01:03:32) - Will the formatter support Prettier? (01:04:05) - License Change to Vite (01:05:14) - When can we test Rolldown + Vite? (01:06:30) - Hiring at VoidZero (01:08:20) - Wrapping up Links and ResourcesAnnouncement BlogpostViteConf KeynoteVoidZero TeamVite License Change PRRolldown Vite Fork
Michael is joined by VueRouter and Pinia Author Eduardo San Martin Morote aka posva.Together, they go deep into questions around the de-facto standard state management tool and why people should use Pinia, but also discuss what Data Loaders and Pinia Colada are (not the drink friends!). Further, the two content creators discuss how Mastering Pinia came together and what challenges are to expect when going from a "live workshop" to recorded videos.And of course, we can't forget upcoming conferences and meetups - with a sneak peek of what posva might present 👀Enjoy the episode!Our GuestEduardo San Martin MoroteWebsiteTwitterYouTubeChapters(00:00) - Welcome to DejaVue (00:46) - Upcoming Vue Conferences (03:46) - Eduardo's Involvement in VueX (05:03) - Why would you use Pinia? (11:50) - Another view on stores (14:14) - Insights from Mastering Pinia (20:16) - Live Workshop vs recorded videos (26:00) - How to improve tech video content (29:09) - Data Loaders API (34:31) - Pina Colada vs GraphQL (36:15) - RFC for Data Loaders (38:10) - Organising a Meetup (44:56) - Wrapping up with a discount Links and ResourcesGet 15% OFF for your Vue Toronto ticket with code DEJAVUE *PiniaMastering Pinia* Pinia Disasterclass TalkMastering Nuxt*DejaVue #E015 - Ten Years of Vue.js (with Evan You)Data LoadersYour HostMichael ThiessenTwitterYouTubeWebsite---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 GuestJoe TannenbaumWebsiteTwitterChapters(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 ResourcesGet 15% OFF for your Vue Toronto ticket with code DEJAVUE *Jess Archer - "Unveiling Laravel Prompts"Joe Tannenbaum - "Terminal UIs" Inertia.jsLaravelLivewireYour HostsAlexander LichterTwitterYouTubeWebsiteMichael ThiessenTwitterYouTubeWebsite---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 Performance Tips

Vue Performance Tips

2024-10-0340:44

Vue is fast (actually the fastest SSR framework)! But sometimes apps might a bit more fine-tuning. And by sometimes, we mean rarely.Still, it can happen - so join Alex and Michael in this DejaVue episode to dive into what tools Vue gives us to improve the frameworks' performance. Further, they dive into the recent SSR benchmark and what it means for you as a developer, as well as striving topics like perceived performance. Enjoy the episode! Chapters(00:00) - Intro (01:14) - The topic of this episode - Performance (02:05) - Optimizing for performance from the beginning? (04:03) - Prop stability (08:18) - v-once (10:45) - v-memo (12:57) - Does v-pre fit into the mix? (14:28) - Recalculation of computed's (20:47) - Virtualization (24:05) - shallowRef (27:25) - Vapor Mode in the future (28:44) - Server Side Rendering (29:14) - The recent SSR benchmark (31:35) - Results of the benchmark (32:00) - What does this mean for you? (35:19) - Perceived performance (37:33) - Improving SSR performance (39:12) - VueConf Toronto (40:20) - Wrapping up Links and Resources15% discount for the VueConf Toronto* with code DEJAVUEDejaVue #E026 - Vue 3.5 AnalyzedDejaVue #E027 - Working at AWS (with Erik Hanchett)v-oncev-memov-preThe shallowRef guidePerformance Vue DocsMichael Reactivity From Scratch Free CourseVapor ModeReading vuejs/core-vaporDejaVue #E001 - The Need for Server-Side Rendering (SSR)Alex' SSR Benchmark videoLinks 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.
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 GuestErik HanchettWebsiteTwitterYouTubeChapters(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 ResourcesGet 15% OFF for your Vue Toronto ticket with code DEJAVUE *AWS AmplifyVueUseVue DemiXStateYour HostMichael ThiessenTwitterYouTubeWebsite---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 3.5 Analyzed

Vue 3.5 Analyzed

2024-09-1944:19

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 Resources10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEDejaVue #E016 - The Future of Vue.js (with Evan You)Vue 3.5 announcement blog postRolldownViteEvan'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 postVue.js Hydration ExplainedLazy Hydration in Nuxt (voice your opinion!)Volkswagen packageVolarDejaVue #E006 - Nuxt Server Components (with Julien Huang)DejaVue #E004 - Teleports and When to Use ThemDejaVue #E011 - Learning new Vue Features and Concepts (with LearnVue aka. Matt Maribojoc)VueUseLinks 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, 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 DEJAVUE10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEPrismicFree Nuxt UI CourseunheadNuxtLink RFC.nuxtrcNuxt Devtools DiscussiondefuDejaVue #E024 - Between Agency Work and Open Source (with Zoey and Dan from SIDESTREAM)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 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 DEJAVUE10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEDejaVue #E015 - Ten Years of Vue (with Evan You)SIDESTREAMSidebaseSidebase Promo VideoSidebase Launch TweetNuxt CLI WizardPrismatRPCSidebase nuxt-auth moduleSentrySentry Nuxt SDK AlphaAdd Sentry to Nuxt 3 recipeNuxt Layers IntroZodAuth.jsnuxt-auth-utilsMakerDAO aka SkyLinks 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 nuggetsEnjoy 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 DEJAVUE10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEMatt's Truck streamBadass.devNeverThrowSentry migrating to TSStripe migrating to TSTS ResetDan Vanderkam's PR to TSTS Flappy BirdTotal TypeScriptLinks 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.
Signals

Signals

2024-08-2226:17

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 DEJAVUE10% discount for the vue.js de Conf in Bonn, Germany* with code DEJAVUEDejaVue #E022 - Reactivity in VueHaskellOCamlElixirElmZodValibotSolid.jsBuilding solid-like Signals in Vue with shallowRefVue Docs on SignalsTC39 ProposalVueUseLinks 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.
Reactivity in Vue

Reactivity in Vue

2024-08-1542:01

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.
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 DEJAVUEAnthony's Explicit Import ESLint moduleAlex' video about Nuxt LayersDave Stewart's Layers ArticleMichael's Mastering Nuxt article about the different configs in Nuxt 3*The Nuxt module listModule Authors GuideLinks 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 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.
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 Resources10% discount for the vue.js de Conf in Bonn, Germany with code DEJAVUEWorking Draft Podcast (German)Vannessa's Research/Comparison TableTiptapawesome-tiptapawesome-vueProseMirrorVannessa's Example repo with TipTap and OpenAILinks 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 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.
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 ResourcesMeteor.jsKnockoutAngularJSSolidRuby on RailsLaravelHTMXSvelteNuxtAlpineJSLaravel LivewireInertiaJohn ResigReactEmberBabelAxiosJustin SchroederTC39 Decorators proposalvue-facing-decorator
loading