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

6. Routing

Activity 6.01: Creating a Message SPA with Dynamic, Nested Routing, and Layouts

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/2ISxml7.

  1. Create a new MessageEditor.vue file in the src/views/ folder as the main component to interact with the user when writing a message. We use textarea as a message input field and attach the listener method onChange to the DOM event change to capture any input change regarding the message typed by the user. Also, we add ref to keep a pointer record to the rendered HTML textarea element for modifying our saved messages at a later stage.

    Besides this, we also attach another listener method, onSendClick, to the click event on the Submit button to capture the user's confirmation for sending the message. The actual logic implementation of both onChange and onSendClick is shown in Step 3.

  2. The <template> section should...
Previous Section
End of Section
Next Section