Frontend Development Projects with Vue.js 3 E-Book

Maya Shavin

• Herausgeber: Packt Publishing
• Sprache: Englisch

Seitenzahl: 483

Veröffentlichungsjahr: 2023

Beschreibung

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.

Leseprobe

Frontend Development Projects with Vue.js 3

Learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js

Maya Shavin

Raymond Camden

BIRMINGHAM—MUMBAI

Frontend Development Projects with Vue.js 3

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Hayden Edwards

Content Development Editor: Abhishek Jadhav

Technical Editor: Simran Ali

Copy Editor: Safis Editing

Project Coordinator: Sonam Pandey

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Aparna Bhagat

Marketing Coordinator: Nivedita Pandey

First published: November 2020

Second edition: March 2023

Production reference: 1150223

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-499-1

www.packtpub.com

To my husband, Natan, for always supporting my career in high tech, and for being my strength and my best buddy in this life.

– Maya Shavin

To my wife, Lindy, for being my rock, my best friend, my partner in LEGO, and the best part of every day.

– Raymond Camden

Contributors

About the authors

Maya Shavin is a senior software engineer at Microsoft, working extensively with JavaScript and frontend frameworks, and is based in Israel. She holds a BSc in computer sciences, a BA in business management, and an International MBA from Bar-Ilan University, Israel.

She has worked with JavaScript and the latest frontend frameworks, such as React, Vue.js, and so on, to create scalable and performant frontend solutions at companies such as Cooladata and Cloudinary, and currently Microsoft. She founded and is currently the organizer of the VueJS Israel Meetup Community, helping to create a strong playground for Vue.js lovers and like-minded developers.

Maya is also a published author, international speaker, and an open source library maintainer of frontend and web projects. She can be reached on her blog (https://mayashavin.com), on Twitter at @mayashavin, or via email.

Raymond Camden is a senior developer evangelist for Adobe. He works on the Acrobat Services APIs to build powerful (and typically, cat-related) PDF demos. He is the author of multiple books on web development and has been actively blogging and presenting for almost 20 years. Raymond can be reached at his blog (www.raymondcamden.com), at http://bit.ly/3KaN4Fr on Mastodon, or via email at [email protected].

About the reviewer

Andrea Koutifaris has a passion for programming, which he likes to say is in his DNA. At the age of 13, he began using his father’s laptop to write his own programs. After graduating high school, he enrolled, without a second thought, at the University of Florence, Faculty of Computer Engineering. After being a Java developer for several years, Andrea gradually moved to frontend development, which is still his passion today. Having spent too much time fixing messed-up code, he is obsessed with good programming and test-driven development, which, in his opinion, is the only way to write production-quality code.

Table of Contents

Preface

Part 1: Introduction and Crash Course

1

Starting Your First Vue Project

Technical requirements

Understanding Vue as a framework

Angular versus Vue

React versus Vue

Advantages of using Vue for your project

Working with Vue

Understanding the Vue instance

Setting up a Vite-powered Vue application

Vue’s SFC architecture

Exercise 1.01 – building your first component

Exploring data properties as a local state

Writing components with script setup

Exercise 1.02 – interpolation with conditionals

Understanding Vue directives

Exercise 1.03 – exploring basic directives (v-text, v-once, v-html, v-bind, v-if, v-show)

Enabling two-way binding using v-model

Exercise 1.04 – experimenting with two-way binding using v-model

Understanding data iteration with v-for

Basic iteration using v-for

Exercise 1.05 – using v-for to iterate through an array of strings

Iterating through an array of objects

Exercise 1.06 – using v-for to iterate through an array of objects and using their properties in v-if conditions

Iterating through a keyed collection (Object)

Exercise 1.07 – using v-for to loop through the properties of Object

Exploring methods

Exercise 1.08 – triggering methods

Exercise 1.09 – returning data using Vue methods

Understanding component lifecycle hooks

Exercise 1.10 – using a Vue lifecycle to control data

Styling components

Exercise 1.11 – importing SCSS into a scoped component

Setting up state-driven dynamic CSS in Vue 3

Understanding CSS modules

Exercise 1.12 – styling Vue components using CSS modules

Activity 1.01 – building a dynamic shopping list app using Vue

Summary

2

Working with Data

Technical requirements

Understanding computed properties

Exercise 2.01 – implementing computed data into a Vue component

Understanding computed setters

Exercise 2.02 – using computed setters

Exploring watchers

Exercise 2.03 – using watchers to set new values

Watching nested properties

Exercise 2.04 – watching nested properties of a data object

Exploring async methods and data fetching

Exercise 2.05 – using asynchronous methods to retrieve data from an API

Comparing methods, watchers, and computed properties

Exercise 2.06 – handling the search functionality using a Vue method, a watcher, and computed props

Activity 2.01 – creating a blog list using the Contentful API

Summary

3

Vite and Vue Devtools

Technical requirements

Using Vite

Exercise 3.01 – setting up a Vue project

Using Vue Devtools

Components tab

Timeline tab

Exercise 3.02 – debugging a Vue application using Devtools

Activity 3.01 – creating a Vue application with Pinia and Router using Vite

Summary

Part 2: Building Your First Vue App

4

Nesting Components (Modularity)

Technical requirements

Passing props

Defining a simple component that accepts props

Passing props to a component

Exercise 4.01 – Implementing a Greeting component

Binding reactive data to props

Exercise 4.02 – Passing reactive data that changes frequently to props

Understanding prop types and validation

Primitive prop validation

Understanding union and custom prop types

Custom validation of arrays and objects

Understanding required props

Setting the default props value

Registering props in <script setup> (setup hook)

Exercise 4.03 – Validating an Object property

Understanding slots, named slots, and scoped slots

Passing markup to a component for rendering

Using named slots to delegate rendering of multiple sections

Using scoped slots to wrap prop-passing logic

Exercise 4.04 – Implementing a card component using named slots

Understanding Vue refs

Exercise 4.05 – Wrapping Countable.js in Vue application

Using events for child-parent communication

Registering events with <script setup> (or setup hook)

Activity 4.01 – A local message view with reusable components

Summary

5

The Composition API

Technical requirements

Creating components with the setup() lifecycle method

Exercise 5.01 – creating a greeting component with setup()

Creating a component with setup() and h()

Exercise 5.02 – creating a dynamic greeting component with the setup() and h() functions

Working with data

Setting a reactive local state with ref()

Setting a reactive local state with reactive()

Exercise 5.03 – binding a component with ref() and reactive()

Computing a reactive state from another local state with computed()

Exercise 5.04 – implementing computed data with computed()

Using watchers with watch()

Exercise 5.05 – using watchers to set new values

Understanding composable lifecycle functions

Exercise 5.06 – using the lifecycle functions to control the data flow

Creating your composable (custom hook)

Exercise 5.07 – creating your first composable

Activity 5.01 – creating a BlogView component with the Composition API

Summary

6

Global Component Composition

Technical requirements

Understanding mixins

Exercise 6.01 – creating your mixin

Understanding plugins

Exercise 6.02 – creating a custom Axios plugin

Globally registering components

Using non-SFC Vue components

Understanding components

Rendering dynamic components by name or component reference

Caching a dynamic component state with keep-alive

Exercise 6.03 – creating a dynamic card layout with the component tag

Writing functional components

Activity 6.01 – building a Vue.js application with plugins and reusable components

Summary

7

Routing

Technical requirements

Understanding routing

Understanding Vue Router

Installing Vue Router

Exploring the RouterView element

Passing props to view

Working with RouterView

Setting up Vue Router

Defining the routes

Tips on loading components for route configuration

Setting up the router instance

Setting up a default layout for your app

Exercise 7.01 – implementing a Message Feed page using Vue Router

Setting up navigation links with RouterLink

Tip for implementing the Back button

Exercise 7.02 – adding the navigation link to the MessageFeed route

Passing route parameters

Understanding Router Hooks

Setting up beforeEach Hooks

Distinguishing between the beforeEach and beforeResolve Hooks

The afterEach Hook

Personalizing Hooks per route

Setting up in-component Hooks

Decoupling Params with Props

Exercise 7.03: Passing the content of the selected message to a new message page and having it printed out

Dynamic routing

Catching error paths

Exercise 7.04 – implementing a message route for each message with the dynamic routing pattern

Nested routes

Exercise 7.05 – building navigation tabs within the message view

Using layouts

Activity 7.01 – creating a message SPA with dynamic, nested routing, and layouts

Summary

8

Animations and Transitions

Technical requirements

Understanding Vue transitions

Using the transition element

Exploring transition classes

An animation for a component

Exploring custom transition classes

Exploring JavaScript Hooks for transitions

Transitioning groups of elements

Creating a moving effect while transitioning a list

Configuring an animation on initially rendering

Exercise 8.02 – sorting a list of messages with an animation

Examining transition routes

Exercise 8.03 – creating a transition effect for each route navigated

Using the GSAP library for animation

Installing GSAP

Basic tweens

Exercise 8.04 – tweening with GSAP

Modifying the look and feel with easing

Modifying the look and feel with stagger

Using Timeline

Activity 8.01 – building a messages app with transitions and GSAP

Summary

Part 3: Global State Management

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

Exercise 9.01 – adding an occupation field to the profile card generator

Exercise 9.02 – adding a Clear button to the profile card generator

Adding simple state management

Exercise 9.03 – moving the Clear button to the application header profile card generator and updating the Clear logic

Activity 9.01 – adding Organization, Email, and Phone Number fields to a profile card generator

Deciding when to use a local state or global state

Summary

10

State Management with Pinia

Technical requirements

What Pinia is

Installing Pinia

Using Pinia to create a store

Exercise 10.01 – building a Color Preview app with a shared state

Adding and using getters in your Pinia store

Exercise 10.02 – improving the Color Preview app with getters

Additional getter features

Working with Pinia actions

Exercise 10.03 – adding lightening and darkening features to the Color Preview app

Debugging Pinia in Devtools

Activity 10.01 – creating a simple shopping cart and price calculator

Summary

Part 4: Testing and Application Deployment

11

Unit Testing

Technical requirements

Understanding testing and the need to test code

Different types of testing

Building your first test

Testing components

Exercise 11.01: Building and unit testing a tag list component

Testing component methods

Exercise 11.02: Building and testing an ellipsis method

Testing Vue routing

Exercise 11.03: Building a tag page and testing its routing

Testing state management with Pinia

Exercise 11.04: Building and testing a cookie disclaimer banner

Snapshot testing

Activity 11.01: Adding a simple search-by-title page with tests

Summary

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

Exercise 12.01 – adding a New Comment button and a corresponding E2E test

Triggering and waiting for UI updates with Cypress

Exercise 12.02 – adding new comment editor input and a Submit functionality

Exercise 12.03 – adding a submitting state to the new comment editor

Intercepting HTTP requests

Exercise 12.04 – POST comment to the API on submission

Activity 12.01 – adding the ability to set a user’s email and test

Summary

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

Exercise 13.01 – adding a lint step to our GitLab CI/CD pipeline

Deploying to Netlify

Exercise 13.02 – deploying a site to Netlify from GitHub

Deploying to AWS using S3 and CloudFront

Exercise 13.03 – deploying to S3 from GitLab CI/CD

Activity 13.01 – adding CI/CD to a Book Search app with GitLab and deploying it to Netlify

Summary

Index

Other Books You May Enjoy

Preface

Are you looking to use Vue.js 3 for web applications, but don’t know where to begin? Frontend Development Projects with Vue.js 3 will help build your development toolkit and get ready to tackle real-world web projects, helping you get to grips with the core concepts of this JavaScript framework with practical examples and activities.

In this book, you’ll work on mini projects, including a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details. These realistic projects are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way.

Here, you’ll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control the application flow. You’ll also work with Vite and Vue Devtools and learn how to handle transition and animation effects to create an engaging user experience. Later, you’ll discover how to test your app and deploy it to the web.

By the end of this book, you’ll gain the skills to start working like an experienced Vue developer, build professional apps that can be used by others, and have the confidence to tackle real-world frontend development problems.

Who this book is for

This book is designed for Vue.js beginners. Whether this is your first JavaScript framework or you’re already familiar with React or Angular, this book will get you on the right track. To understand the concepts explained in this book, you must be familiar with HTML, CSS, JavaScript, and Node package management.

What this book covers

Chapter 1, Starting Your First Vue Project, helps you understand the key concepts and benefits of Vue.js, how to set up the project architecture using the terminal (or command line), and how to create a simple Vue component with local data following the component fundamentals.

Chapter 2, Working with Data, enables you to monitor, manage, and manipulate data from various sources in your Vue.js components. You will learn how to utilize Vue’s powerful data reactivity and cache system through computed properties and how to set up advanced watchers to observe components’ data changes.

Chapter 3, Vite and Vue Devtools, introduces you to Vite and shows you how to debug these computed properties and events using Vue Devtools.

Chapter 4, Nesting Components (Modularity), helps you discover how to modularize a Vue application using component hierarchies and nesting. This chapter introduces concepts such as props, events, prop validation, and slots. It also covers how to use refs to access DOM elements at runtime.

Chapter 5, The Composition API, teaches you how to write isolated composables (or custom hooks) to reuse in multiple components using the Composition API with the setup() method, and how to build a scalable component system for your Vue project beyond using the classic Options API.

Chapter 6, Global Component Composition, helps you to organize your code using mixins and plugins, achieve global composition, and keep the code DRY (following the Don’t Repeat Yourself (DRY) principle) in any project. You will also understand the advantages and drawbacks of global composition, thus deciding the right approach to maximize your component’s flexibility.

Chapter 7, Routing, guides you through how routing and Vue Router work. You will learn how to set up, implement, and manage the routing system in your app with Vue Router.

Chapter 8, Animations and Transitions, helps you explore the essentials of Vue transitions and how to create your transition, including single-element animation and group-of-elements animation, and how to combine them with external libraries for further customization. You will also learn how to create full-page animations with transition routes.

Chapter 9, The State of Vue State Management, helps you understand how to manage the state (data) in a complex Vue application.

Chapter 10, State Management with Pinia, teaches you how the Pinia library makes managing the state easier.

Chapter 11, Unit Testing, introduces you to testing Vue components.

Chapter 12, End-to-End Testing, provides an explanation of End-to-End (E2E) testing and how it differs from Unit tests, as well as many examples of adding it to your Vue project.

Chapter 13, Deploying Your Code to the Web, helps you take a deep look into actually getting your Vue project live on the internet.

To get the most out of this book

Software/hardware covered in the book

Operating system requirements

Node Package Manager (npm)

Windows, macOS, or Linux

Yarn Package Manager (yarn)

Visual Studio Code (VS Code) IDE

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/kefZM.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “An example of using the this instance is shown here: “

A block of code is set as follows:

export default {   data() {     return {       yourData: "your data"     }   },   computed: {     yourComputedProperty() {       return `${this.yourData}-computed`;     }   } }

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

// header.vue <script>     import logo from 'components/logo.vue'     export default {        components: {          logo         }     } </script>

Any command-line input or output is written as follows:

node -v

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “We can do this by checking that it is called when clicking the Close button.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Frontend Development Projects with Vue.js 3, we’d love to hear your thoughts! Please select https://www.amazon.in/review/create-review/error?asin=1803234997 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere? Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803234991

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: Introduction and Crash Course

In this part, we will be introduced to the Vue framework by building Vue components and running live projects. We will find out how easy it is to control data using Vue’s two-way binding directives syntax, understand event life cycles and reactivity in Vue, and become comfortable creating complex forms.

We will cover the following chapters in this section:

Chapter 1, Starting Your First Vue ProjectChapter 2, Working with DataChapter 3, Vite and Vue Devtools