Test Driving Vue 3
summary
Builds a reusable modal in a real demo using Vue CLI 4.5 and Vue 3, wiring state with createApp(...).mount() and the Composition API (ref, a useModalState module) instead of mixins; notes the root data must be a factory function and templates now allow fragments (multiple roots). Uses Teleport to #modal-wrapper so the modal renders at the document root, declares events with emits, and styles slot content with the v-slotted pseudo-selector; the demo runs as expected.
AI-written summary · about
chapters (20)
- 0:00Intro
- 2:07What we'll build
- 2:41Installation with Vue CLI
- 3:17Resetting boilerplate
- 3:45Creating a Vue 3 app
- 5:41Declaring app data
- 6:04Vue 2 way
- 7:10Using a root component in Vue 3
- 8:14Simplifying syntax
- 8:31Defining root component
- 8:46Toggling modal state with button
- 9:06Creating modal component
- 10:22Refactoring with Composition API
- 14:15Reason for change?
- 17:15Teleporting content
- 19:35Rendered output
- 20:00Emitting events in Vue 3
- 22:06Styling slot content in Vue 3
- 24:42Get the slides and demo project
- 25:05Learn Vue 3 hands on in my video courses
related talks
28mExploring Vue3's Built-In Components
21mTesting Vue Apps
26mUnit testing Vue components Why test, what to test, and how to test Vue components
42mStress-free Testing for Vue
35mAnimating Vue
38mAn Introduction to the Vue Ecosystem
32mMigrating Vue 2 to Vue 3
31mVueConf US 2021 | Component testing with Vite, Vue, and Cypress