Learning Vue: Core Concepts and Practical Patterns for Reusable, Composable, and Scalable User Interfaces

Preface....5 Conventions Used in This Book....5 Using Code Examples....6 O’Reilly Online Learning....7 How to Contact Us....8 Acknowledgments....9 1. Welcome to the Vue.js World!....11 What Is Vue.js?....11 The Benefits of Vue in Modern Web Development....12 Installing Node.js....13 NPM....14 Yarn....16 Vue Developer Tools....17 Vite.js as a Builder Management Tool....19 Create a New Vue Application....20 File Repository Structure....22 Summary....24 2. How Vue Works: The Basics....26 Virtual DOM Under the Hood....26 The Layout Update Problem....27 What Is Virtual DOM?....29 How Virtual DOM Works in Vue....31 The Vue App Instance and Options API....32 Exploring the Options API....34 The Template Syntax....37 Creating Local State with Data Properties....38 How Reactivity in Vue Works....41 Two-Way Binding with v-model....43 Using v-model.lazy Modifier....47 Binding Reactive Data and Passing Props Data with v-bind....49 Binding to Class and Style Attributes....51 Iterating over Data Collection Using v-for....54 Iterating Through Object Properties....58 Make the Element Binding Unique with Key Attribute....59 Adding Event Listener to Elements with v-on....61 Handling Events with v-on Event Modifiers....63 Detecting Keyboard Events with Key Code Modifiers....67 Conditional Rendering Elements with v-if, v-else, and v-else-if....69 Conditional Displaying Elements with v-show....72 Dynamically Displaying HTML Code with v-html....73 Displaying Text Content with v-text....74 Optimizing Renders with v-once and v-memo....75 Registering a Component Globally....79 Summary....80 3. Composing Components....81 Vue Single File Component Structure....81 Using defineComponent() for TypeScript Support....85 Component Lifecycle Hooks....86 setup....89 beforeCreate....93 created....93 beforeMount....93 mounted....93 beforeUpdate....94 updated....94 beforeUnmount....94 unmounted....94 Methods....101 Computed Properties....103 Watchers....106 Observing for Changes in Nested Properties....110 Using the this.$watch() Method....113 The Power of Slots....115 Using Named Slots with Template Tag and v-slot Attribute....121 Understanding Refs....125 Sharing Component Configuration with Mixins....128 Scoped Styling Components....133 Applying CSS to a Child Component in Scoped Styles....137 Applying Scoped Styles to Slot Content....138 Accessing a Component’s Data Value in Style Tag with v-bind() Pseudo-Class....139 Styling Components with CSS Modules....141 Summary....143 4. Interactions Between Components....144 Nested Components and Data Flow in Vue....144 Using Props to Pass Data to Child Components....145 Declaring Prop Types with Validation and Default Values....149 Declaring Props with Custom Type Checking....151 Declaring Props Using defineProps() and withDefaults()....155 Communication Between Components with Custom Events....157 Defining Custom Events Using defineEmits()....161 Communicate Between Components with provide/inject Pattern....163 Using provide to Pass Data....163 Using inject to Receive Data....165 Teleport API....166 Implementing a Modal with Teleport and the Element....168 Rendering Problem Using Teleport....177 Summary....179 5. Composition API....180 Setting Up Components with Composition API....180 Handling Data with ref() and reactive()....181 Using ref()....181 Using reactive()....187 Using the Lifecycle Hooks....191 Understanding Watchers in Composition API....195 Using computed()....200 Creating Your Reusable Composables....203 Summary....208 6. Incorporating External Data....209 What Is Axios?....209 Installing Axios....210 Load Data with Lifecycle Hooks and Axios....211 Async Data Requests in Run-Time: the Challenge....216 Creating Your Reusable Fetch Component....219 Connect Your Application with an External Database....223 Summary....224 7. Advanced Rendering, Dynamic Components, and Plugin Composition....226 The Render Function and JSX....226 Using the Render Function....227 Using the h Function to Create a VNode....228 Writing JavaScript XML in the Render Function....231 Functional Component....233 Defining Props and Emits for Functional Component....234 Adding Custom Functionality Globally with Vue Plugins....235 Dynamic Rendering with the  Tag....238 Keeping Component Instance Alive with ....240 Summary....242 8. Routing....243 What is Routing?....243 Using Vue Router....245 Installing Vue Router....245 Defining Routes....248 Creating a Router Instance....252 Plugging the Router Instance Into the Vue Application....254 Rendering the Current Page with the RouterView Component....255 Build a Navigation Bar with the RouterLink Component....257 Passing Data Between Routes....259 Decoupling Route Parameters Using Props....264 Understanding Navigation Guards....266 Global Navigation Guards....266 Route-Level Navigation Guards....268 Component-Level Router Guards....270 Creating Nesting Routes....272 Creating Dynamic Routes....275 Going Back and Forward with the Router Instance....278 Handling Unknown Routes....280 Summary....282 9. State Management with Pinia....283 Understanding State Management in Vue....283 Understanding Pinia....286 Creating a Pizzas Store for Pizza House....288 Creating a Cart Store for Pizza House....293 Using the Cart Store in a Component....294 Adding Items to the Cart from the Pizzas Gallery....296 Displaying Cart Items with Actions....299 Removing Items from the Cart Store....302 Unit Testing Pinia Stores....305 Subscribing Side Effects on Store Changes....306 Summary....308 10. Transitioning and Animation in Vue....310 Understanding CSS Transitions and CSS Animations....310 Transition Component in Vue.js....312 Using Custom Transition Class Attributes....317 Adding Transition Effect on the Initial Render with appear....319 Building Transition for a Group of Elements....319 Creating Route Transitions....322 Using Transition Events to Control Animation....323 Summary....325 11. Testing in Vue....326 Introduction to Unit Testing and E2E Testing....326 Vitest as a Unit Testing Tool....328 Configuring Vitest Using Parameters and Config File....329 Writing Your First Test....332 Testing Non-Lifecycle Composables....339 Testing Composables with Lifecycle Hook....342 Testing Components Using Vue Test Utils....348 Testing Interaction and Events of a Component....353 Using Vitest with a GUI....355 Using Vitest with a Coverage Runner....357 End-to-End Testing with PlaywrightJS....362 Debugging E2E Tests Using Playwright Test Extension for VSCode....372 Summary....375 12. Continuous Integration/Continuous Deployment of Vue.Js Applications....376 CI/CD in Software Development....376 Continuous Integration....377 Continuous Delivery....377 Continuous Deployment....377 CI/CD Pipeline with GitHub Actions....378 Continuous Deployment with Netlify....383 Deploying with Netlify CLI....386 Summary....387 13. Server-Side Rendering with Vue....388 Client-Side Rendering in Vue....388 Server-Side Rendering (SSR)....389 Server-Side Rendering with Nuxt.Js....396 Static Side Generator (SSG)....406 Last Words....407 Index....409 About the Author....491