7. Animations and Transitions | Front-End Development Projects with Vue.js

Book Overview & Buying
Table Of Contents

Front-End Development Projects with Vue.js

By : Raymond Camden, Hugo Di Francesco, Clifford Gurney , Philip Kirkbride , Maya Shavin , Dániel Szabó

4.8 (10)

Buy this Book

Front-End Development Projects with Vue.js

4.8 (10)

By: Raymond Camden, Hugo Di Francesco, Clifford Gurney , Philip Kirkbride , Maya Shavin , Dániel Szabó

Buy this Book

Overview of this book

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.

Preface

About the Book

1. Starting Your First Vue Project

Introduction

Angular versus Vue

React versus Vue

A Webpack Vue Application

Data Properties (Props)

Data Binding Syntax Using Interpolation

Styling Components

CSS Modules

Vue Directives

Two-Way Binding Using v-model

Anonymous Loops

Iterating over Objects

Vue Lifecycle Hooks

Summary

Free Chapter

2. Working with Data

Introduction

Computed Properties

Computed Setters

Watchers

Deep Watching Concepts

Methods versus Watchers versus Computed Props

Async Methods and Data Fetching

Summary

3. Vue CLI

Introduction

Using Vue CLI

Vue Prototyping

The Vue-UI

Vue.js DevTools

Summary

4. Nesting Components (Modularity)

Introduction

Passing Props

Prop Typing and Validation

Slots, Named Slots, and Scoped Slots

Template Logic Sharing with Filters

Vue.js refs

Vue.js Events for Child-Parent Communication

Summary

5. Global Component Composition

Introduction

Mixins

Plugins

Globally Registering Components

Maximizing Component Flexibility

Using Vue.js Components without a .vue Single-File Component

The Vue component Tag

Functional Components

Summary

6. Routing

Introduction

Vue Router

The router-view Element

Using Props to Define the Entry Point of an Application

Setting Up Vue Router for Vue to Use

Passing Route Parameters

Decoupling Params with Props

Router Hooks

Setting up in-Component Hooks

Dynamic Routing

Nested Routes

Using Layouts

Summary

7. Animations and Transitions

Introduction

Vue Transitions

JavaScript Hooks

Transition Groups

Transition Routes

Using the GSAP Library for Animation

Summary

8. The State of Vue.js State Management

Introduction

Holding State in a Common Ancestor Component

Using the Vuex Pattern in Contrast with Other Patterns Such as Redux

When to Use Local State and When to Save to Global State

Summary

9. Working with Vuex – State, Getters, Actions, and Mutations

Introduction

Installing Vuex

Working with State

Applying Getters

Getters with Parameters

Modifying State with Mutations

Using Actions for Asynchronous State Changes

Simplifying with mapState and mapGetters

Simplifying with mapMutations and mapActions

Summary

10. Working with Vuex – Fetching Remote Data

Introduction

Installation of Axios

Using Defaults with Axios

Using Axios with Vuex

Summary

11. Working with Vuex – Organizing Larger Stores

Introduction

Approach One – Using File Splitting

Approach Two – Using Modules

Other Approaches to Organizing Your Vuex Stores

Summary

12. Unit Testing

Introduction

Why We Need to Test Code

Understanding Different Types of Testing

Your First Test

Testing Components

Testing Methods, Filters and Mixins

Testing Vue Routing

Testing Vuex

Snapshot Testing

Summary

13. End-to-End Testing

Introduction

Understanding E2E Testing and Its Use Cases

Configuring Cypress for a Vue.js Application

Summary

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

Deploying to Netlify

Deploying to AWS Using S3 and CloudFront

Summary

Appendix

1. Starting Your First Vue Project

2. Working with Data

3. Vue CLI

4. Nesting Components (Modularity)

5. Global Component Composition

6. Routing

7. Animations and Transitions

8. The State of Vue.js State Management

9. Working with Vuex – State, Getters, Actions, and Mutations

10. Working with Vuex – Fetching Remote Data

11. Working with Vuex – Organizing Larger Stores

12. Unit Testing

13. End-to-End Testing

14. Deploying Your Code to the Web

Front-End Development Projects with Vue.js

By : Raymond Camden, Hugo Di Francesco, Clifford Gurney , Philip Kirkbride , Maya Shavin , Dániel Szabó

Front-End Development Projects with Vue.js

By: Raymond Camden, Hugo Di Francesco, Clifford Gurney , Philip Kirkbride , Maya Shavin , Dániel Szabó

Overview of this book

Summary

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access