Now that we have taken a look at the structure of the project, let’s talk more about the App.vue file. This file consists of a so-called single file component. We can see this on the file name, which has the vue extension. This is a convention for single file components. These files contain a template… read more

Alright, so now that we have set up our project, let’s actually see what it looks like. First, let’s open up the “package.json” file, which describes the project’s dependencies. { “name”: “sample-project”, “description”: “A Vue.js project”, “version”: “1.0.0”, “author”: “Bo Andersen “, “private”: true, “scripts”: { “dev”: “cross-env NODE_ENV=development webpack-dev-server –open –hot”, “build”: “cross-env NODE_ENV=production… read more

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