Book Image

Front-End Development Projects with Vue.js

By : Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin
Book Image

Front-End Development Projects with Vue.js

By: Raymond Camden, Hugo Di Francesco, Clifford Gurney, Philip Kirkbride, Maya Shavin

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.

Related Content you might be interested in

Current Title:

Small book image
Front-End Development Projects with Vue.js
Raymond Camden | Hugo Di Francesco | Clifford Gurney | Philip Kirkbride | Maya Shavin
Nov, 2020 | 774 pages
Small book image
Vue.js 3 Cookbook
Heitor Ramon Ribeiro
Sep, 2020 | 562 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Table of Contents (16 chapters)
Preface
About the Book
1
1. Starting Your First Vue Project
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
2. Working with Data
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
3. Vue CLI
3. Vue CLI
Introduction
Using Vue CLI
Vue Prototyping
The Vue-UI
Vue.js DevTools
Summary
4
4. Nesting Components (Modularity)
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
5. Global Component Composition
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
6. Routing
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
7. Animations and Transitions
7. Animations and Transitions
Introduction
Vue Transitions
JavaScript Hooks
Transition Groups
Transition Routes
Using the GSAP Library for Animation
Summary
8
8. The State of Vue.js State Management
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
9. Working with Vuex – State, Getters, Actions, and Mutations
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
10. Working with Vuex – Fetching Remote Data
10. Working with Vuex – Fetching Remote Data
Introduction
Installation of Axios
Using Defaults with Axios
Using Axios with Vuex
Summary
11
11. Working with Vuex – Organizing Larger Stores
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
12. Unit Testing
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
13. End-to-End Testing
13. End-to-End Testing
Introduction
Understanding E2E Testing and Its Use Cases
Configuring Cypress for a Vue.js Application
Summary
14
14. Deploying Your Code to the Web
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

3. Vue CLI

Overview

This chapter introduces Vue CLI, including the Vue-UI and Vue.js DevTools, which are used when developing Vue applications for production. The Vue-UI allows you to create, develop, and manage Vue projects through an accompanying graphical user interface. Vue.js DevTools is a standalone app and browser extension for debugging Vue.js applications. We go into the details of the use cases and benefits of using Vue CLI features, which will teach you how to utilize these Vue commands. In addition to the command-line controls, we will set up and run Vue projects utilizing the new Vue GUI. We will combine the knowledge accrued in previous chapters to create new Vue applications that use v-model directives and two-way binding concepts. We will then dive into how to prototype Vue components. We will also learn how to build a Vue prototype for production and serve it locally. As we proceed, you will see how to set up and debug your Vue app and showcase its features...

Previous Section
End of Section 1
Next Section