Learning Vue

Methods
Computed Properties
Watchers
Observing for Changes in Nested Properties
Using the this.$watch() Method
The Power of Slots
Using Named Slots with Template Tag and v-slot Attribute
Understanding Refs
Sharing Component Configuration with Mixins
Scoped Styling Components
Applying CSS to a Child Component in Scoped Styles
Applying Scoped Styles to Slot Content
Accessing a Component’s Data Value in Style Tag with v-bind() Pseudo-Class
Styling Components with CSS Modules
Summary

4. Interactions Between Components
Nested Components and Data Flow in Vue
Using Props to Pass Data to Child Components
Declaring Prop Types with Validation and Default Values
Declaring Props with Custom Type Checking
Declaring Props Using defineProps() and withDefaults()
Communication Between Components with Custom Events
Defining Custom Events Using defineEmits()
Communicate Between Components with provide/inject Pattern
Using provide to Pass Data
Using inject to Receive Data
Teleport API
Implementing a Modal with Teleport and the <dialog> Element
Rendering Problem Using Teleport
Summary

5. Composition API
Setting Up Components with Composition API
Handling Data with ref() and reactive()
Using ref()
Using reactive()
Using the Lifecycle Hooks
Understanding Watchers in Composition API
Using computed()
Creating Your Reusable Composables
Summary

6. Incorporating External Data
What Is Axios?
Installing Axios
Load Data with Lifecycle Hooks and Axios
Async Data Requests in Run-Time: the Challenge
Creating Your Reusable Fetch Component
Connect Your Application with an External Database
Summary

7. Advanced Rendering, Dynamic Components, and Plugin Composition
The Render Function and JSX
Using the Render Function
Using the h Function to Create a VNode
Writing JavaScript XML in the Render Function
Functional Component
Defining Props and Emits for Functional Component
Adding Custom Functionality Globally with Vue Plugins
Dynamic Rendering with the <component> Tag
Keeping Component Instance Alive with <keep-alive>
Summary

8. Routing
What is Routing?
Using Vue Router
Installing Vue Router
Defining Routes
Creating a Router Instance
Plugging the Router Instance Into the Vue Application
Rendering the Current Page with the RouterView Component
Build a Navigation Bar with the RouterLink Component
Passing Data Between Routes
Decoupling Route Parameters Using Props
Understanding Navigation Guards
Global Navigation Guards
Route-Level Navigation Guards
Component-Level Router Guards
Creating Nesting Routes
Creating Dynamic Routes
Going Back and Forward with the Router Instance
Handling Unknown Routes
Summary

9. State Management with Pinia
Understanding State Management in Vue
Understanding Pinia
Creating a Pizzas Store for Pizza House
Creating a Cart Store for Pizza House
Using the Cart Store in a Component
Adding Items to the Cart from the Pizzas Gallery
Displaying Cart Items with Actions
Removing Items from the Cart Store
Unit Testing Pinia Stores
Subscribing Side Effects on Store Changes
Summary

10. Transitioning and Animation in Vue
Understanding CSS Transitions and CSS Animations
Transition Component in Vue.js
Using Custom Transition Class Attributes
Adding Transition Effect on the Initial Render with appear
Building Transition for a Group of Elements
Creating Route Transitions
Using Transition Events to Control Animation
Summary

11. Testing in Vue
Introduction to Unit Testing and E2E Testing
Vitest as a Unit Testing Tool
Configuring Vitest Using Parameters and Config File
Writing Your First Test
Testing Non-Lifecycle Composables
Testing Composables with Lifecycle Hook
Testing Components Using Vue Test Utils
Testing Interaction and Events of a Component
Using Vitest with a GUI
Using Vitest with a Coverage Runner
End-to-End Testing with PlaywrightJS
Debugging E2E Tests Using Playwright Test Extension for VSCode
Summary

12. Continuous Integration/Continuous Deployment of Vue.Js Applications
CI/CD in Software Development
Continuous Integration
Continuous Delivery
Continuous Deployment
CI/CD Pipeline with GitHub Actions
Continuous Deployment with Netlify
Deploying with Netlify CLI
Summary

13. Server-Side Rendering with Vue
Client-Side Rendering in Vue
Server-Side Rendering (SSR)
Server-Side Rendering with Nuxt.Js
Static Side Generator (SSG)
Last Words

Index
About the Author