204 | Why Vue? A Deep Dive with Alex Riviere

COMPRESSEDfm

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