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

Learn the core concepts of Vue.js, the modern JavaScript framework for building frontend applications and interfaces from scratch. With concise, practical, and clear examples, this book takes web developers step-by-step through the tools and libraries in the Vue.js ecosystem and shows them how to create complete applications for real-world web projects.

You'll learn how to handle data communication between components with Pinia architecture, develop a manageable routing system for a frontend project to control the application flow, and produce basic animation effects to create a better user experience.

This book also shows you how to:

• Create reusable and lightweight component systems using Vue.js
• Bring reactivity to your existing static application
• Set up a project using Vite.js, a build tool for frontend project code management
• Build an interactive state management system for a frontend application with Pinia
• Connect external data from the server to your Vue application
• Control the application flow with static and dynamic routing using Vue Router
• Fully test your application using Vitest and Playwright