Troubleshooting Vue.js

Video description

Quick solutions to common Vue.js problems

About This Video

  • Learn some common troubleshooting techniques to solve common problems that most Vue.js developers encounter.
  • Understand Vue.js restrictions and limitations, the flow of communication between parent and child components, and Vue's reactivity system to help you troubleshoot Vue.js application.
  • Learn to leverage Vue's powerful Single-File Components (SFC) and Separation of Concerns (SOC) for better performance

In Detail

Do you know what to do if your Vue application goes blank? What if the view does not update when something changes in the model? Or what if the view fails to respond to a route change? Whenever you have a problem with your Vue application, don't panic! There are many different things that could cause a problem with your Vue application. Some common issues center around templates, components, forms, lists, routing, and performance. No matter what's causing the issue, there are many basic troubleshooting techniques you can use to fix issues such as these.

Troubleshooting is a process of trial and error—in some cases, you may need to use several different approaches before you can find a solution. Some problems may be easy to fix while others are impossible to resolve at all. This course highlights some common problems faced by developers in different stages of their Vue application development and shows you some simple and practical methods to try when troubleshooting, as well as how to solve more difficult problems you may encounter.

All the code and supporting files for this course are available on Github at

Table of contents

  1. Chapter 1 : Troubleshooting Techniques
    1. The Course Overview 00:04:47
    2. Divide and Conquer 00:01:52
    3. Using the Mathematical Induction Approach 00:08:40
    4. Translating Pseudocode into Code 00:07:48
    5. Simplifying Complex Code into More Readable Code 00:18:58
    6. Using JavaScript Debugger 00:13:55
    7. Unit Testing 00:17:29
  2. Chapter 2 : Solving Common Issues with the Templating System - The View
    1. Improper Use of HTML Based Template Syntax 00:16:52
    2. Missing the Root Element 00:08:13
    3. Incorrect Use of Mustache Tag 00:06:27
    4. Plain Text versus Raw HTML 00:05:16
    5. Common Mistakes Using JavaScript Statements and Flow Controls 00:09:39
    6. Forgetting to Scope CSS Rules 00:09:15
    7. Inline Templates versus X-Templates 00:10:59
  3. Chapter 3 : Troubleshooting Vue's Components and Data Binding – The ViewModel
    1. Declaring Too Many Global Components 00:10:05
    2. Forgetting to Import/Export a Component 00:05:57
    3. Forgetting to Register a Component 00:11:01
    4. Conflicting Component Names with HTML Elements 00:11:00
    5. The Missing Dot 00:07:39
    6. Component's Data as an Object and Function 00:11:52
    7. Confusing Parentheses with Curly Braces 00:10:21
    8. The v-if and v-show Directives 00:06:20
    9. Common Side Effect Using v-for with Object 00:11:23
    10. Using Mutating versus Non-Mutating Array Methods 00:10:07
  4. Chapter 4 : Understanding Issues and Limitations with Forms
    1. Forgetting to Declare Initial Values 00:10:21
    2. The Side Effects of Using Text Interpolation on <textarea> 00:08:08
    3. The Unselected State of the <select> Element 00:04:30
    4. Radio Buttons versus Checkboxes 00:11:06
  5. Chapter 5 : Resolving Issues with Routing and State Management
    1. Forgetting To Install Vue Router 00:16:19
    2. The <router-view> Tag 00:06:27
    3. Common Mistakes Between this.$route and this.$router 00:15:12

Product information

  • Title: Troubleshooting Vue.js
  • Author(s): Christian Hur
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788993531