Front-End Development Projects with Vue.js by Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, and Maya Shavin -- Read -- Imperial Library of Trantor

Index

Front-End Development Projects with Vue.js Preface

About the Book

About the Authors Who This Book Is For About the Chapters Conventions Before You Begin Minimum Hardware Recommendations for Running Node.js Applications Installing Node.js Installing Git Installing Yarn Installing Vue.js CLI (the Vue Command-Line Interface) Installing Visual Studio Code (Editor/IDE) Installing the Code Bundle Get in Touch Please Leave a Review

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

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

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

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

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

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

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

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

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