Frontend Development Projects with Vue.js 3: Learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js, 2nd Edition

✍ Scribed by Maya Shavin, Raymond Camden

Publisher: Packt Publishing
Year: 2023
Tongue: English
Leaves: 628
Edition: 2
Category: Library

No coin nor oath required. For personal study only.

✦ Synopsis

Let industry experts guide you on your journey to becoming a Vue.js developer with the help of practical projects and fun exercises

Purchase of the print or Kindle book includes a free PDF eBook

Key Features

Work through mini projects, exercises, and activities to learn Vue.js in a practical way
Create dynamic components and user interfaces that are fast and intuitive
Find out how you can get the most out of the Vue.js 3 framework and build an end-to-end project

Book Description

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.

What you will learn

Set up a development environment and start your first Vue.js 3 project
Modularize a Vue application using component hierarchies
Use external JavaScript libraries to create animations
Share state between components and use Pinia for state management
Work with APIs using Pinia and Axios to fetch remote data
Validate functionality with unit testing and end-to-end testing
Get to grips with web app deployment

Who this book is for

This book is designed for Vue.js beginners. Whether this is your first JavaScript framework, or if 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.

Starting Your First Vue Project
Working with Data
Vite and Vue Devtools
Nesting Components (Modularity)
Composition API
Global Component Composition
Routing
Animations and Transitions
The State of Vue State Management
State Management with Pinia
Unit Testing
End-to-End Testing
Deploying Your Code to the Web

✦ Table of Contents

Cover
Title page
Copyright and credits
Contributors
Table of Contents
Preface
Part 1: Introduction and Crash Course
Chapter 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
Chapter 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
Chapter 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
Chapter 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