Learning Vue Core Concepts and Practical Patterns for Reusable Composable Scalable User Interfaces 1st Edition by Maya Shavin 1492098787 9781492098782

1. Welcome to the Vue.js World!

What Is Vue.js?

The Benefits of Vue in Modern Web Development

Installing Node.js

NPM

Yarn

Vue Developer Tools

Vite.js as a Builder Management Tool

Create a New Vue Application

File Repository Structure

Summary

2. How Vue Works: The Basics

Virtual DOM Under the Hood

The Layout Update Problem

What Is Virtual DOM?

How Virtual DOM Works in Vue

The Vue App Instance and Options API

Exploring the Options API

The Template Syntax

Creating Local State with Data Properties

How Reactivity in Vue Works

Two-Way Binding with v-model

Using v-model.lazy Modifier

Binding Reactive Data and Passing Props Data with v-bind

Binding to Class and Style Attributes

Iterating over Data Collection Using v-for

Iterating Through Object Properties

Make the Element Binding Unique with Key Attribute

Adding Event Listener to Elements with v-on

Handling Events with v-on Event Modifiers

Detecting Keyboard Events with Key Code Modifiers

Conditional Rendering Elements with v-if, v-else, and v-else-if

Conditional Displaying Elements with v-show

Dynamically Displaying HTML Code with v-html

Displaying Text Content with v-text

Optimizing Renders with v-once and v-memo

Registering a Component Globally

Summary

3. Composing Components

Vue Single File Component Structure

Using defineComponent() for TypeScript Support

Component Lifecycle Hooks

setup

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

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 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 Tag

Keeping Component Instance Alive with

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

Summary13. 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