Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

Using VueJS, you can combine writing HTML and Javascript. Vue will then keep your Javascript objects and HTML in sync. This means your events in your DOM (HTML) can mutate the VueJS Javascript objects, resulting in modifications in your DOM (and the other way around).

Here is a simple example — This small piece of HTML + VueJS code allows you to add and remove Todo’s.

You can use Vue in vanillajs projects (so: just write plain old Javascript), but you probably want to do a bit more. How about using ES6 syntax, modules, npm packages, etc.?

And: how about live-reload to make development easier? How about packing everything and make your project ready for deployment to browsers?

This tutorial may require some knowledge about html, javascript and the basics of virtual dom.

NPM

npm is the package manager for JavaScript and the world’s largest software registry. There is an amazing amount of packages, ready to use, available at https://www.npmjs.com

When you have nodejs installed on your PC, you will automatically have npm installed as well. We are going to use npm in a minute, so make sure you have node (js) installed.

Meet vue-cli

There are a lot of tools that, combined, will allow you to start developing your VueJS webapp in seconds. All the good stuff is already available for you in templates. vue-cli allows you to kick off your project.

Let’s install vue-cli globally (the -g option):

npm install -g vue-cli

Now you have the vue init command available (and since we’ve installed vue-cli globally, you can run this command from every folder (in your terminal))

The vue init command allows you to specify a template package and a project folder. After a small install wizard your project folder will be created with lots of tools and config pre-installed, allowing you to start development.

The vue webpack template

The webpack template for VueJS comes with lots of awesome tools pre-installed and pre-configured:

Development webserver with auto-reload

ES6 syntax support (import, require, etc.)

Build tools (to compile, minify, etc.) for deployment to the browser

Routing

Vue components (combine the Vue HTML template with the vue object and styling in one component (file))

Debugging tools

Syntax linting

Create your first project

Go to the folder where you would like to create your vue webpack project (folder), and run: