Learning Vue
Published on 1. December 2023
350 pages
978-1-4920-9878-2 (ISBN)
Description
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
More details
Other editions
Additional editions
Maya Shavin
Learning Vue
Core Concepts and Practical Patterns for Reusable, Composable, Scalable User Interfaces
Book
12/2023
O'Reilly
€61.50
Shipment within 15-20 days
Content
- Intro
- Copyright
- Table of Contents
- Preface
- Conventions Used in This Book
- Using Code Examples
- O'Reilly Online Learning
- How to Contact Us
- Acknowledgments
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Chapter 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
- Colophon
