Now that we have introduced the Vue CLI and its templates, let’s now go ahead and install the tool. Node.js is required for installing Vue CLI, which you can get at nodejs.org. We won’t need it because we will be using Node.js itself, though, but because we will be using its package manager, NPM. If… read more

Vue CLI is a simple tool for scaffolding Vue.js applications, i.e. setting up a basic development environment and project structure. When doing so, one must choose a template, and there are currently five different ones to choose from. First we have a webpack template, which includes a full setup with webpack and includes things such… read more

We just took a closer look at a Vue instance’s lifecycle, including which hooks we have at our disposal. In this post, I want to show you how to actually use these lifecycle hooks for running custom code at certain stages of a Vue instance’s lifecycle. Below is a simple Vue instance with all of… read more

In the last couple of posts, you have actually seen a few examples of parts of the Vue instance lifecycle. I didn’t mention it at the time, but let’s now see how some of the things we learned fit into the bigger picture. Each time we create a Vue instance, there are a series of… read more

In this short post, I want to show you how you can destroy a Vue instance. Usually you won’t need to do this yourself, though. When we get into talking about components, we will see that it is better to control the lifecycle of child components by using directives such as the v-if directive. That’s… read more

Now that we have seen how to dynamically mount Vue instances to HTML elements, let’s see how we can use inline templates. Until now, we have always added all of our HTML markup within the HTML section on JSFiddle. But you can, however, also add a Vue instance’s template within the instance itself by using… read more

Until now, we have always used the el property within our Vue instances to specify which HTML element our Vue instance should control. Or, more formally, which element the Vue instance should be mounted to. This means that we have to know which element the Vue instance should be mounted to when we declare the… read more

It’s time to take a closer look at a few more special Vue instance properties and methods, with the first one being the $refs property. But before diving into the JavaScript part of things, let’s start by taking a look at the template. <div id=”app”> <h1>{{ message }}</h1> <button @click=”clickedButton”>Click Me!</button> </div> var vm =… read more

In this post, I want to show you how to add watchers dynamically, i.e. “outside” of the Vue instance. If you have assigned a Vue instance to a variable as we have here, then there is a $watch instance method available on this variable. This method let’s you add a watcher, so let’s go ahead… read more

Now that we have covered how Vue proxies and reacts to data, let’s take a short moment to talk about something called “the virtual DOM.” This sounds super fancy and perhaps slightly intimidating, but don’t worry! It’s not really a requirement to know what the virtual DOM is when working with Vue.js, but it’s always… read more