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

Working with State

At the lowest level in a Vuex store, you will find the actual data (the state) that Vuex manages. All components have access to the state via a special $store variable. While there's more within this variable, to read the state, you can use $store.state.someStateValue. So, for example: Hello, my name is {{ $store.state.name }} would output the name value from your Vuex store in a component. For simple operations reading from the store, that's all you need.

We will now learn how to display state values in the following exercise.

Exercise 9.01: Displaying State Values

In this exercise, you will create an empty Vue application using Vuex. The previous section described how that was done via the CLI, and if you followed along, you've got one ready to go. If not, go ahead and create one now, ensuring you enable Vuex. In this exercise, we'll simply set a few values in the state and display them in a component.

To access the code files...

Previous Section
End of Section 4
Next Section