Front-End Development Projects with Vue.js: Learn to build scalable web applications and dynamic user interfaces with Vue 2

Description

Get to grips with the core fundamentals of Vue.js 2 and learn to build reliable component-based applications with practical guidance from industry experts Key FeaturesLearn how to make the best use of the Vue.js 2 framework and build a full end-to-end projectBuild dynamic components and user interfaces that are fast and intuitiveWrite performant code that “just works” and is easily scalable and reusableBook Description Are you looking to use Vue 2 for web applications, but don't know where to begin? Front-End Development Projects with Vue.js will help build your development toolkit and get ready to tackle real-world web projects. You'll get to grips with the core concepts of this JavaScript framework with practical examples and activities. Through the use-cases in this book, you'll discover how to handle data in Vue components, define communication interfaces between components, and handle static and dynamic routing to control application flow. You'll get to grips with Vue CLI and Vue DevTools, and learn how to handle transition and animation effects to create an engaging user experience. In chapters on testing and deploying to the web, you'll gain the skills to start working like an experienced Vue developer and build professional apps that can be used by other people. You'll work on realistic projects that are presented as bitesize exercises and activities, allowing you to challenge yourself in an enjoyable and attainable way. These mini projects include a chat interface, a shopping cart and price calculator, a to-do app, and a profile card generator for storing contact details. By the end of this book, you'll have the confidence to handle any web development project and tackle real-world front-end development problems. What you will learnSet up a development environment and start your first Vue 2 projectModularize a Vue application using component hierarchiesUse external JavaScript libraries to create animationsShare state between components and use Vuex for state managementWork with APIs using Vuex and Axios to fetch remote dataValidate functionality with unit testing and end-to-end testingGet to grips with web app deploymentWho 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. Cover FM Copyright Table of Contents Preface Chapter 1: Starting Your First Vue Project Introduction Angular versus Vue React versus Vue Advantages of Using Vue for Your Project The Vue Instance in a Simple Vue Application A Webpack Vue Application Vue Single-Page Components Data Properties (Props) Exercise 1.01: Building Your First Component Data Binding Syntax Using Interpolation Exercise 1.02: Interpolation with Conditionals Styling Components Exercise 1.03: Importing SCSS into a Scoped Component CSS Modules Exercise 1.04: Style Vue Components Using CSS Modules Exercise 1.05: Writing a Component Template in PUG (HAML) Vue Directives Exercise 1.06: Basic Directives (v-text, v-once, v-html, v-bind, v-if, v-show) Two-Way Binding Using v-model Exercise 1.07: Two-Way Binding Using v-model Anonymous Loops Exercise 1.08: Using v-for to Loop Over an Array of Strings Iterating over Objects Exercise 1.09: Using a v-for Loop over an Array of Objects and Using Their Properties for v-if Conditions Methods in Vue Exercise 1.10: Triggering Methods Exercise 1.11: Returning Data Using Vue Methods Vue Lifecycle Hooks Exercise 1.12: Using Vue Lifecycles for Controlling Data Activity 1.01: Building a Dynamic Shopping List App Using Vue.js Summary Chapter 2: Working with Data Introduction Computed Properties Exercise 2.01: Implementing Computed Data into a Vue Component Computed Setters Exercise 2.02: Using Computed Setters Watchers Exercise 2.03: Using Watchers to Set New Values Deep Watching Concepts Exercise 2.04: Watching Nested Properties of a Data Object Methods versus Watchers versus Computed Props Exercise 2.05: Handling Search Functionality Using a Vue Method, a Watcher, and Computed Props Async Methods and Data Fetching Exercise 2.06: Using Asynchronous Methods to Retrieve Data from an API Activity 2.01: Creating a Blog List Using the Contentful API Summary Chapter 3: Vue CLI Introduction Using Vue CLI Exercise 3.01: Setting up a Project Using Vue CLI Vue Prototyping Getting Started with Prototyping Defining Your Own Entry Point Building a Prototype for Production Exercise 3.02: Instant Prototyping Using Vue CLI The Vue-UI Exercise 3.03: Creating and Building a New Project from the Vue-UI Vue.js DevTools Exercise 3.04: Debugging a Vue Application Using DevTools Activity 3.01: Building a Vue Application Using the Vue-UI and the Vuetify Component Library Summary Chapter 4: Nesting Components (Modularity) Introduction Passing Props Defining a Simple Component That Takes Props Rendering a Component with Props Component Registration Tricks Exercise 4.01: Implementing a Greeting Component Dynamic Props with Data Binding Exercise 4.02: Passing Props That Change Over Time Prop Typing and Validation Primitive Prop Validation Union and Custom Prop Types Custom Validation of Arrays, Object Shapes, and More with Validators Required Props Defaulting Props Exercise 4.03: Validating an Object Property Slots, Named Slots, and Scoped Slots Passing Markup to Be Rendered in a Child Component 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 Template Logic Sharing with Filters Exercise 4.05: Implementing an Ellipsis Filter Vue.js refs Exercise 4.06: Wrapping Countable.js with Vue.js Vue.js Events for Child-Parent Communication Activity 4.01: A Local Message View with Reusable Components Summary Chapter 5: Global Component Composition Introduction Mixins Exercise 5.01: Creating Your Own Mixin Plugins Exercise 5.02: Creating a Custom Axios Plugin Globally Registering Components Maximizing Component Flexibility Using Vue.js Components without a .vue Single-File Component Runtime Definition with a String Template The render Function JSX The Vue component Tag Rendering Dynamic Components by Name or Component Reference Caching a Dynamic Component State with Keep-Alive Exercise 5.03: Creating a Dynamic Card Layout with the component Tag Functional Components Activity 5.01: Building a Vue.js Application with Plugins and Reusable Components Summary Chapter 6: Routing Introduction Vue Router Setting Up Vue Router The router-view Element Using Props to Define the Entry Point of an Application Setting Up Vue Router for Vue to Use Defining the Routes Tips on Loading Components for Route Configuration Setting up the Router Instance routes mode base Exercise 6.01: Implementing and Adding a Message Feed Page Using Vue Router Setting up Navigation Links Tip to Implement the Back Button Exercise 6.02: Adding the Navigation Link to the MessageFeed Route Passing Route Parameters Decoupling Params with Props Exercise 6.03: Passing the Content of the Selected Message to a New Message Page and Having It Printed Out Router Hooks Setting up beforeEach Hooks Differentiating Between the beforeEach and beforeResolve Hooks The afterEach Hook Personalizing Hooks per Route Setting up in-Component Hooks Exercise 6.04: Extracting a Messages List to an External File and Loading It Only When MessageFeed Is in View Dynamic Routing Catching Error Paths Exercise 6.05: Implementing a Message Route for Each Message with a Dynamic Routing Pattern Nested Routes Exercise 6.06: Building Navigation Tabs within the Message View Using Layouts Activity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts Summary Chapter 7: Animations and Transitions Introduction Vue Transitions Transition Elements Transition Classes Animation for a Component Custom Transition Classes JavaScript Hooks Exercise 7.01: Adding a New Message with an Animation Effect Transition Groups Creating a Moving Effect While Transitioning a List Making an Animation on Initial Render Exercise 7.02: Sorting a List of Messages with an Animation Transition Routes Exercise 7.03: Creating a Transition Effect for Each Route Navigated Using the GSAP Library for Animation Installing GSAP Basic tweens Exercise 7.04: Tweens with GSAP Modifying the Look and Feel with Easing Modifying the Look and Feel with Stagger Using Timeline Activity 7.01: Building a Messages App with Transition and GSAP Summary Chapter 8: The State of Vue.js State Management Introduction Holding State in a Common Ancestor Component Exercise 8.01: Adding an Occupation Field to the Profile Card Generator Exercise 8.02: Adding a Clear Button to the Profile Card Generator The Event Bus Exercise 8.03: Moving the Clear Button to the Application Header Profile Card Generator Using the Vuex Pattern in Contrast with Other Patterns Such as Redux Exercise 8.04: Adding an Organization Field to the Profile Generator Activity 8.01: Adding Email and Phone Number to a Profile Card Generator When to Use Local State and When to Save to Global State Summary Chapter 9: Working with Vuex – State, Getters, Actions, and Mutations Introduction Store State Getters Mutations Actions Modules Installing Vuex Working with State Exercise 9.01: Displaying State Values Applying Getters Exercise 9.02: Adding Getters to a Vuex Store Getters with Parameters Exercise 9.03: Employing a Getter with Parameters Modifying State with Mutations Exercise 9.04: Working with Mutations Using Actions for Asynchronous State Changes Exercise 9.05: Using Actions for Asynchronous Logic Simplifying with mapState and mapGetters Exercise 9.06: Adding mapState and mapGetters Simplifying with mapMutations and mapActions Activity 9.01: Creating a Simple Shopping Cart and Price Calculator Summary Chapter 10: Working with Vuex – Fetching Remote Data Introduction Installation of Axios Exercise 10.01: Using Axios to Load Data from an API Using Defaults with Axios Using Axios with Vuex Exercise 10.02: Working with Axios in Vuex Activity 10.01: Using Axios and Vuex with Authentication Summary Chapter 11: Working with Vuex – Organizing Larger Stores Introduction Approach One – Using File Splitting Exercise 11.01: Using File Splitting Approach Two – Using Modules Exercise 11.02: Making Use of Modules Other Approaches to Organizing Your Vuex Stores Vuex Pathify Vuex Module Generator (VMG) Vuex ORM Activity 11.01: Simplifying a Vuex Store Summary Chapter 12: Unit Testing Introduction Why We Need to Test Code Understanding Different Types of Testing Your First Test Testing Components Exercise 12.01: Building and Unit Testing a Tag List Component Testing Methods, Filters and Mixins Exercise 12.02: Building and Testing an ellipsis Filter Testing Vue Routing Exercise 12.03: Building a Tag Page and Testing Its Routing Testing Vuex Exercise 12.04: Building and Testing a Cookie Disclaimer Banner (Vuex) Snapshot Testing Activity 12.01: Adding a Simple Search by Title Page with Tests Summary Chapter 13: End-to-End Testing Introduction 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 13.01: Adding a "New Comment" Button and Corresponding E2E Test Triggering and Waiting for UI Updates with Cypress Exercise 13.02: Adding New Comment Editor Input and Submit Functionality Exercise 13.03: Adding a Submitting State to the New Comment Editor Intercepting HTTP Requests Exercise 13.04: POST Comment to API on Submission Visual Regression Testing with Cypress Snapshots Activity 13.01: Adding the Ability to Set a User's Email and Tests Summary Chapter 14: Deploying Your Code to the Web Introduction The Benefits of CI/CD as Part of an Agile Software Development Process Building for Production Using GitLab CI/CD to Test Your Code Exercise 14.01: Adding a Lint Step to Your GitLab CI/CD Pipeline Deploying to Netlify Exercise 14.02: Deploying a Site to Netlify from GitHub Deploying to AWS Using S3 and CloudFront Exercise 14.03: Deploying to S3 from GitLab CI/CD Activity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront Summary Appendix Index