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

Cover Page....2

Table of Contents....3

Preface....5

Part 1: Introduction and Crash Course....13

Chapter 1: Starting Your First Vue Project....14

Technical requirements....14

Understanding Vue as a framework....15

Setting up a Vite-powered Vue application....21

Exploring data properties as a local state....30

Writing components with script setup....31

Understanding Vue directives....39

Enabling two-way binding using v-model....50

Understanding data iteration with v-for....58

Exploring methods....75

Understanding component lifecycle hooks....89

Styling components....102

Understanding CSS modules....117

Summary....123

Chapter 2: Working with Data....125

Technical requirements....125

Understanding computed properties....126

Understanding computed setters....137

Exploring watchers....146

Watching nested properties....152

Exploring async methods and data fetching....160

Comparing methods, watchers, and computed properties....172

Summary....192

Chapter 3: Vite and Vue Devtools....193

Technical requirements....193

Using Vite....194

Using Vue Devtools....199

Summary....216

Part 2: Building Your First Vue App....218

Chapter 4: Nesting Components (Modularity)....219

Technical requirements....219

Passing props....220

Understanding prop types and validation....230

Understanding slots, named slots, and scoped slots....250

Understanding Vue refs....264

Using events for child-parent communication....272

Summary....277

Chapter 5: The Composition API....279

Technical requirements....279

Creating components with the setup() lifecycle method....280

Working with data....290

Understanding composable lifecycle functions....326

Creating your composable (custom hook)....335

Summary....352

Chapter 6: Global Component Composition....353

Technical requirements....353

Understanding mixins....354

Understanding plugins....362

Globally registering components....369

Understanding components....375

Writing functional components....399

Summary....407

Chapter 7: Routing....408

Technical requirements....409

Understanding routing....409

Understanding Vue Router....410

Exploring the RouterView element....411

Setting up Vue Router....413

Defining the routes....414

Setting up a default layout for your app....422

Setting up navigation links with RouterLink....428

Passing route parameters....436

Understanding Router Hooks....439

Decoupling Params with Props....450

Dynamic routing....461

Catching error paths....464

Nested routes....470

Using layouts....483

Summary....489

Chapter 8: Animations and Transitions....491

Technical requirements....491

Understanding Vue transitions....492

Exploring JavaScript Hooks for transitions....502

Transitioning groups of elements....513

Examining transition routes....526

Using the GSAP library for animation....537

Summary....551

Part 3: Global State Management....552

Chapter 9: The State of Vue State Management....553

Technical requirements....553

Understanding the component architecture and the problem of the state....554

Holding the state in a common ancestor component....555

Adding simple state management....575

Deciding when to use a local state or global state....586

Summary....587

Chapter 10: State Management with Pinia....589

Technical requirements....589

What Pinia is....590

Installing Pinia....592

Using Pinia to create a store....593

Adding and using getters in your Pinia store....605

Working with Pinia actions....609

Debugging Pinia in Devtools....613

Summary....619

Part 4: Testing and Application Deployment....620

Chapter 11: Unit Testing....621

Technical requirements....621

Understanding testing and the need to test code....622

Building your first test....624

Testing components....627

Testing component methods....640

Testing Vue routing....645

Testing state management with Pinia....662

Snapshot testing....678

Summary....680

Chapter 12: End-to-End Testing....682

Technical requirements....682

Understanding E2E testing and its use cases....683

Configuring Cypress for a Vue.js application....684

Using Cypress to interact with and inspect a Vue.js UI....688

Triggering and waiting for UI updates with Cypress....694

Intercepting HTTP requests....710

Summary....729

Chapter 13: Deploying Your Code to the Web....730

Technical requirements....730

Exploring the benefits of CI/CD as part of an agile software development process....731

Building our apps for production....738

Using GitLab CI/CD to test our code....739

Deploying to Netlify....753

Deploying to AWS using S3 and CloudFront....765

Summary....793

Index....795

Why subscribe?....827

Other Books You May Enjoy....828

Packt is searching for authors like you....832

Share Your Thoughts....832

Download a free PDF copy of this book....833

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.