Manage episode 493258864 series 2942363
Vue developer Alex Riviere joins Amy to explore the fundamental differences between Vue and React, diving deep into Vue's unique approach to reactivity, templating, and developer experience. From the magic of V-Model eliminating controlled/uncontrolled input complexity to Vue's proxy-based reactivity system that "just works," Alex explains why Vue's mental model clicked for him coming from jQuery. The conversation covers Vue 3's Composition API and Script Setup syntax, the evolution from VueX to Pinia for state management, and exciting developments like Vue Vapor Mode that will eliminate the virtual DOM entirely. Alex also breaks down Evan You's recent $4.6M VoidZero funding to revolutionize JavaScript build tooling, the flexibility of Nuxt as a meta-framework, and why Vue remains approachable enough to sprinkle into any project without complex build steps.
Show Notes
00:00 - Intro
01:10 - How Alex Got Started with Vue
03:00 - Vue vs React Mental Models
08:00 - Vue's Approach to Forms and V-Model
10:20 - Vue Frameworks: Nuxt and the Ecosystem
17:00 - Vue 2 to Vue 3 Migration Challenges
19:00 - Nuxt as a Dev Dependency vs Runtime
22:30 - When Do You Need a Framework with Vue?
25:30 - Laravel Integration and Alpine.js Connection
27:40 - Vue's Reactivity System and Proxies
29:40 - State Management: VueX to Pinia Evolution
32:20 - SSR and Server Components in Vue
34:10 - Hosting and Deployment Options
35:40 - Evan You's VoidZero Funding and Vision
43:10 - Vue Vapor Mode: Eliminating Virtual DOM
47:40 - Getting Started with Vue Resources
48:40 - Picks and Plugs
Links and Resources
People Mentioned
- Alex Riviere - @alexriviere
- Evan You - Vue.js creator - @youyuxi
- Ben Hong - Vue core team member - @bencodezen
- Daniel Roe - Nuxt team - @danielcroe
- Taylor Otwell - Laravel creator - @taylorotwell
Vue.js Resources
- Vue.js Official Site - vuejs.org
- Vue.js Documentation - vuejs.org/guide
- Vue School - vueschool.io
- Vue Mastery - vuemastery.com
Frameworks & Tools Mentioned
- Nuxt - nuxt.com
- Vite - vitejs.dev
- Astro - astro.build
- Pinia (Vue state management) - pinia.vuejs.org
- VueX (legacy state management) - vuex.vuejs.org
- Alpine.js - alpinejs.dev
- Laravel - laravel.com
- Livewire - livewire.laravel.com
- Solid.js - solidjs.com
- React - react.dev
- Svelte - svelte.dev
Build Tools & Infrastructure
- ESBuild - esbuild.github.io
- Rollup - rollupjs.org
- NitroPack - nitro.unjs.io
- Webpack - webpack.js.org
- VoidZero (Evan You's new company) - voidzero.dev
Hosting Platforms
- Netlify - netlify.com
- Vercel - vercel.com
- Cloudflare - cloudflare.com
React Ecosystem (for comparison)
- Next.js - nextjs.org
- Remix - remix.run
- RedwoodJS - redwoodjs.com
- Gatsby - gatsbyjs.com
Podcasts & Content
- Deja Vue Podcast - dejavue.fm (mentioned Evan You VoidZero interview)
- Vue.js Conferences - VueConf events
Technical Concepts to Research
- Vue Composition API - vuejs.org/guide/extras/composition-api-faq.html
- Vue Script Setup - vuejs.org/api/sfc-script-setup.html
- Vue Directives - vuejs.org/guide/essentials/template-syntax.html#directives
- Vue Reactivity - vuejs.org/guide/extras/reactivity-in-depth.html
- Vue Vapor Mode (experimental) - github.com/vuejs/core-vapor
- JavaScript Proxies - MDN Proxy Documentation
- Signals (reactive programming) - General concept in modern frameworks
Picks & Plugs
- Dropout TV - Nobody Asked - dropout.tv
- CodeMash Conference - codemash.org
- Whoosh Screen Cleaner - https://amzn.to/4nBR5Ut
Additional Helpful Resources
- Vue 2 to Vue 3 Migration Guide - v3-migration.vuejs.org
- Vue vs React Comparison - vuejs.org/guide/extras/composition-api-faq.html#comparison-with-react-hooks
- Islands Architecture - jasonformat.com/islands-architecture
206 episodes