Learning Vue

Book 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

Publisher resources

View/Submit Errata

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

Product information

  • Title: Learning Vue
  • Author(s): Maya Shavin
  • Release date: December 2023
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781492098829