Learning Vue

Table of contents

1. Preface
   1. Conventions Used in This Book
   2. Using Code Examples
   3. O’Reilly Online Learning
   4. How to Contact Us
   5. Acknowledgments
2. 1. Welcome to the Vue.js World!
   1. What Is Vue.js?
   2. The Benefits of Vue in Modern Web Development
   3. Installing Node.js
      1. NPM
      2. Yarn
   4. Vue Developer Tools
   5. Vite.js as a Builder Management Tool
   6. Create a New Vue Application
   7. File Repository Structure
   8. Summary
3. 2. How Vue Works: The Basics
   1. Virtual DOM Under the Hood
      1. The Layout Update Problem
      2. What Is Virtual DOM?
      3. How Virtual DOM Works in Vue
   2. The Vue App Instance and Options API
   3. Exploring the Options API
   4. The Template Syntax
   5. Creating Local State with Data Properties
   6. How Reactivity in Vue Works
   7. Two-Way Binding with v-model
   8. Using v-model.lazy Modifier
   9. Binding Reactive Data and Passing Props Data with v-bind
   10. Binding to Class and Style Attributes
   11. Iterating over Data Collection Using v-for
       1. Iterating Through Object Properties
       2. Make the Element Binding Unique with Key Attribute
   12. Adding Event Listener to Elements with v-on
       1. Handling Events with v-on Event Modifiers
       2. Detecting Keyboard Events with Key Code Modifiers
   13. Conditional Rendering Elements with v-if, v-else, and v-else-if
   14. Conditional Displaying Elements with v-show
   15. Dynamically Displaying HTML Code with v-html
   16. Displaying Text Content with v-text
   17. Optimizing Renders with v-once and v-memo
   18. Registering a Component Globally
   19. Summary
4. 3. Composing Components
   1. Vue Single File Component Structure
   2. Using defineComponent() for TypeScript Support
   3. Component Lifecycle Hooks
      1. setup
      2. beforeCreate
      3. created
      4. beforeMount
      5. mounted
      6. beforeUpdate
      7. updated
      8. beforeUnmount
      9. unmounted
   4. Methods
   5. Computed Properties
   6. Watchers
      1. Observing for Changes in Nested Properties
      2. Using the this.$watch() Method
   7. The Power of Slots
   8. Using Named Slots with Template Tag and v-slot Attribute
   9. Understanding Refs
   10. Sharing Component Configuration with Mixins
   11. Scoped Styling Components
       1. Applying CSS to a Child Component in Scoped Styles
       2. Applying Scoped Styles to Slot Content
       3. Accessing a Component’s Data Value in Style Tag with v-bind() Pseudo-Class
   12. Styling Components with CSS Modules
   13. Summary
5. 4. Interactions Between Components
   1. Nested Components and Data Flow in Vue
      1. Using Props to Pass Data to Child Components
      2. Declaring Prop Types with Validation and Default Values
      3. Declaring Props with Custom Type Checking
      4. Declaring Props Using defineProps() and withDefaults()
   2. Communication Between Components with Custom Events
   3. Defining Custom Events Using defineEmits()
   4. Communicate Between Components with provide/inject Pattern
      1. Using provide to Pass Data
      2. Using inject to Receive Data
   5. Teleport API
      1. Implementing a Modal with Teleport and the <dialog> Element
      2. Rendering Problem Using Teleport
   6. Summary
6. 5. Composition API
   1. Setting Up Components with Composition API
   2. Handling Data with ref() and reactive()
      1. Using ref()
      2. Using reactive()
   3. Using the Lifecycle Hooks
   4. Understanding Watchers in Composition API
   5. Using computed()
   6. Creating Your Reusable Composables
   7. Summary
7. 6. Incorporating External Data
   1. What Is Axios?
   2. Installing Axios
   3. Load Data with Lifecycle Hooks and Axios
   4. Async Data Requests in Run-Time: the Challenge
   5. Creating Your Reusable Fetch Component
   6. Connect Your Application with an External Database
   7. Summary
8. 7. Advanced Rendering, Dynamic Components, and Plugin Composition
   1. The Render Function and JSX
      1. Using the Render Function
      2. Using the h Function to Create a VNode
      3. Writing JavaScript XML in the Render Function
   2. Functional Component
   3. Defining Props and Emits for Functional Component
   4. Adding Custom Functionality Globally with Vue Plugins
   5. Dynamic Rendering with the <component> Tag
   6. Keeping Component Instance Alive with <keep-alive>
   7. Summary
9. 8. Routing
   1. What is Routing?
   2. Using Vue Router
      1. Installing Vue Router
      2. Defining Routes
      3. Creating a Router Instance
      4. Plugging the Router Instance Into the Vue Application
      5. Rendering the Current Page with the RouterView Component
      6. Build a Navigation Bar with the RouterLink Component
   3. Passing Data Between Routes
   4. Decoupling Route Parameters Using Props
   5. Understanding Navigation Guards
      1. Global Navigation Guards
      2. Route-Level Navigation Guards
      3. Component-Level Router Guards
   6. Creating Nesting Routes
   7. Creating Dynamic Routes
   8. Going Back and Forward with the Router Instance
   9. Handling Unknown Routes
   10. Summary
10. 9. State Management with Pinia
    1. Understanding State Management in Vue
    2. Understanding Pinia
    3. Creating a Pizzas Store for Pizza House
    4. Creating a Cart Store for Pizza House
    5. Using the Cart Store in a Component
    6. Adding Items to the Cart from the Pizzas Gallery
    7. Displaying Cart Items with Actions
    8. Removing Items from the Cart Store
    9. Unit Testing Pinia Stores
    10. Subscribing Side Effects on Store Changes
    11. Summary
11. 10. Transitioning and Animation in Vue
    1. Understanding CSS Transitions and CSS Animations
    2. Transition Component in Vue.js
       1. Using Custom Transition Class Attributes
       2. Adding Transition Effect on the Initial Render with appear
    3. Building Transition for a Group of Elements
    4. Creating Route Transitions
    5. Using Transition Events to Control Animation
    6. Summary
12. 11. Testing in Vue
    1. Introduction to Unit Testing and E2E Testing
    2. Vitest as a Unit Testing Tool
    3. Configuring Vitest Using Parameters and Config File
    4. Writing Your First Test
    5. Testing Non-Lifecycle Composables
    6. Testing Composables with Lifecycle Hook
    7. Testing Components Using Vue Test Utils
    8. Testing Interaction and Events of a Component
    9. Using Vitest with a GUI
    10. Using Vitest with a Coverage Runner
    11. End-to-End Testing with PlaywrightJS
    12. Debugging E2E Tests Using Playwright Test Extension for VSCode
    13. Summary
13. 12. Continuous Integration/Continuous Deployment of Vue.Js Applications
    1. CI/CD in Software Development
       1. Continuous Integration
       2. Continuous Delivery
       3. Continuous Deployment
    2. CI/CD Pipeline with GitHub Actions
    3. Continuous Deployment with Netlify
    4. Deploying with Netlify CLI
    5. Summary
14. 13. Server-Side Rendering with Vue
    1. Client-Side Rendering in Vue
    2. Server-Side Rendering (SSR)
    3. Server-Side Rendering with Nuxt.Js
    4. Static Side Generator (SSG)
    5. Last Words
15. Index
16. About the Author