Book Image

Frontend Development Projects with Vue.js 3 - Second Edition

By : Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco
5 (2)
Book Image

Frontend Development Projects with Vue.js 3 - Second Edition

5 (2)
By: Maya Shavin, Raymond Camden, Clifford Gurney, Hugo Di Francesco

Overview of this book

Are you looking to use Vue.js 3 for building web apps but don't know where to begin? Frontend Development Projects with Vue.js 3 will help you get to grips with the core concepts of this JavaScript framework using practical examples that simulate real-world web projects. With this updated edition, you’ll experience all aspects of the new and improved Vue.js 3 as you work on mini projects such as a chat interface, a shopping cart, a price calculator, a to-do app, and a profile card generator for storing contact details. These realistic projects are presented as bite-size exercises that you can enjoy even as you challenge yourself. Throughout the book, you'll discover how to manage data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll also work with Vite and Vue DevTools and learn how to handle transition and animation effects for an engaging user experience. Finally, you’ll see how to test your app and deploy it to the web. By the end of this Vue.js book, you'll have the skills that enable you to work like an experienced Vue developer to build professional apps that can be used by others and have the confidence to tackle real-world frontend web development problems.

Related Content you might be interested in

Current Title:

Small book image
Frontend Development Projects with Vue.js 3 - Second Edition
Maya Shavin | Raymond Camden | Clifford Gurney | Hugo Di Francesco
Mar, 2023 | 628 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Small book image
Building Real-World Web Applications with Vue.js 3
Joran Quinten
Jan, 2024 | 318 pages
Table of Contents (20 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
1
Part 1: Introduction and Crash Course
Part 1: Introduction and Crash Course
Free Chapter
2
Chapter 1: Starting Your First Vue Project
Chapter 1: Starting Your First Vue Project
Technical requirements
Understanding Vue as a framework
Setting up a Vite-powered Vue application
Exploring data properties as a local state
Writing components with script setup
Understanding Vue directives
Enabling two-way binding using v-model
Understanding data iteration with v-for
Exploring methods
Understanding component lifecycle hooks
Styling components
Understanding CSS modules
Summary
3
Chapter 2: Working with Data
Chapter 2: Working with Data
Technical requirements
Understanding computed properties
Understanding computed setters
Exploring watchers
Watching nested properties
Exploring async methods and data fetching
Comparing methods, watchers, and computed properties
Summary
4
Chapter 3: Vite and Vue Devtools
Chapter 3: Vite and Vue Devtools
Technical requirements
Using Vite
Using Vue Devtools
Summary
5
Part 2: Building Your First Vue App
Part 2: Building Your First Vue App
6
Chapter 4: Nesting Components (Modularity)
Chapter 4: Nesting Components (Modularity)
Technical requirements
Passing props
Understanding prop types and validation
Understanding slots, named slots, and scoped slots
Understanding Vue refs
Using events for child-parent communication
Summary
7
Chapter 5: The Composition API
Chapter 5: The Composition API
Technical requirements
Creating components with the setup() lifecycle method
Working with data
Understanding composable lifecycle functions
Creating your composable (custom hook)
Summary
8
Chapter 6: Global Component Composition
Chapter 6: Global Component Composition
Technical requirements
Understanding mixins
Understanding plugins
Globally registering components
Understanding components
Writing functional components
Summary
9
Chapter 7: Routing
Chapter 7: Routing
Technical requirements
Understanding routing
Understanding Vue Router
Exploring the RouterView element
Setting up Vue Router
Defining the routes
Setting up a default layout for your app
Setting up navigation links with RouterLink
Passing route parameters
Understanding Router Hooks
Decoupling Params with Props
Dynamic routing
Catching error paths
Nested routes
Using layouts
Summary
10
Chapter 8: Animations and Transitions
Chapter 8: Animations and Transitions
Technical requirements
Understanding Vue transitions
Exploring JavaScript Hooks for transitions
Transitioning groups of elements
Examining transition routes
Using the GSAP library for animation
Summary
11
Part 3: Global State Management
Part 3: Global State Management
12
Chapter 9: The State of Vue State Management
Chapter 9: The State of Vue State Management
Technical requirements
Understanding the component architecture and the problem of the state
Holding the state in a common ancestor component
Adding simple state management
Deciding when to use a local state or global state
Summary
13
Chapter 10: State Management with Pinia
Chapter 10: State Management with Pinia
Technical requirements
What Pinia is
Installing Pinia
Using Pinia to create a store
Adding and using getters in your Pinia store
Working with Pinia actions
Debugging Pinia in Devtools
Summary
14
Part 4: Testing and Application Deployment
Part 4: Testing and Application Deployment
15
Chapter 11: Unit Testing
Chapter 11: Unit Testing
Technical requirements
Understanding testing and the need to test code
Building your first test
Testing components
Testing component methods
Testing Vue routing
Testing state management with Pinia
Snapshot testing
Summary
16
Chapter 12: End-to-End Testing
Chapter 12: End-to-End Testing
Technical requirements
Understanding E2E testing and its use cases
Configuring Cypress for a Vue.js application
Using Cypress to interact with and inspect a Vue.js UI
Triggering and waiting for UI updates with Cypress
Intercepting HTTP requests
Summary
17
Chapter 13: Deploying Your Code to the Web
Chapter 13: Deploying Your Code to the Web
Technical requirements
Exploring the benefits of CI/CD as part of an agile software development process
Building our apps for production
Using GitLab CI/CD to test our code
Deploying to Netlify
Deploying to AWS using S3 and CloudFront
Summary
18
Index
Index
Why subscribe?
19
Other Books You May Enjoy
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts
Download a free PDF copy of this book

Transitioning groups of elements

To access the code file for this example, refer to https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08/Example8.04

So far, we have gone through the fundamentals of Vue transition elements for simple components and elements, with both custom CSS-only and JavaScript-only support for animations. Next, we will explore how to apply a transition to a group of components – for instance, a list of items that will be rendered simultaneously by using v-for.

Vue.js provides another component for this specific purpose, the transition-group component.

We will now assume that we have a list of messages displayed on a feed, and we would like to add a transition to this list to provide some kind of effect when each item appears on the screen. Take the following component code, for instance (./Example8.04/src/components/Example8-04.vue):

<template>
  <div>
   ...
Previous Section
End of Section 5
Next Section