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

✍ Scribed by Raymond Camden; Hugo Di Francesco; Clifford Gurney; Philip Kirkbride; Maya Shavin

• Publisher: Packt Publishing Ltd
• Year: 2020
• Tongue: English
• Leaves: 775
• Category: Library

✦ Synopsis

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 Features

• Learn how to make the best use of the Vue.js 2 framework and build a full end-to-end project
• Build dynamic components and user interfaces that are fast and intuitive
• Write performant code that “just works” and is easily scalable and reusable

Book 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 learn

• Set up a development environment and start your first Vue 2 project
• Modularize a Vue application using component hierarchies
• Use external JavaScript libraries to create animations
• Share state between components and use Vuex for state management
• Work with APIs using Vuex 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.

✦ Table of Contents

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