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