Vue Tutorial: An Overview and Walkthrough

We’re in a golden era of JavaScript libraries and frameworks. More and more companies are building out full, dynamic web apps in addition to - or in lieu of - traditional desktop applications. This means things are constantly changing and frameworks are going in and out of vogue, but the core concepts of what we’re trying to accomplish remain similar.

Previously, I wrote a Getting Started with React guide that helped out a lot of beginner and intermediate developers. Vue.js is going toe-to-toe with React for popularity among JavaScript developers, so I’d like to offer the same straightforward and concise introduction for those who’d like to learn Vue as well. Let’s get started!

Prerequisites

Knowledge of HTML & CSS
Knowledge of basic JavaScript
Familiarity of ES6+ features and syntax
Node.js and npm (or yarn) installed globally
Familiarity with REST APIs would be helpful, but we’ll go over it.

Goals

We’re going to create a small application with Vue. The app will be a simple employee database and we’ll learn:

How to set up Vue
The anatomy of a Vue file
How to work with data, methods, conditional statements, and events in Vue
How to create, update, view, and delete users (employees) from the system
How to make API calls for each of the above actions
How to use tables, forms, and form validation
How to host a Vue build on GitHub pages

I’ve created a live demo and put the source up on GitHub.

(You can also view the demo on CodeSandbox.)

What is Vue?

Vue (or Vue.js) is an open-source front-end JavaScript framework
Vue is the view layer of an MVC application (Model View Controller)
Vue is currently one of the most popular JavaScript libraries/frameworks
Unlike other popular JavaScript projects, Vue is not backed by a large corporation like React (Facebook) or Angular (Google). Vue was originally written by Evan You and the open-source community.

Setup and Installation

There are two main ways to set up Vue - in a Node project, or directly injected into a static HTML file. I’d first like to take a look at setting up Vue in an HTML file, as it’s the simplest setup and introduction. Those who have only ever used a library like jQuery will be most familiar with this method. If you’ve already used React or another JavaScript framework, feel free to skip to the next section.

We can just create a basic HTML file and add a link to a Vue CDN in the head, and create a <div> with an id of app.

Static HTML File

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Vue App</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

We can create a simple “Hello World” with Vue. Using double brackets, we’ll render message in app. In the <script> tag, we’ll link the data and the DOM. We create a new Vue, and the message property on data will be rendered.

index.html

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Vue App</title>
  </head>

  <body>
    <div id="app">{{message}}</div>

    <script>
      const App = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
        },
      })
    </script>
  </body>
</html>

We can see the data render.

At this point, it’s not very impressive, and it’s what you’ll learn in the introduction of the documentation, but it drives home the important point that Vue is just JavaScript, and there’s no need to get nervous about Node, Babel, Webpack, and so on.

#javascript #vue #tutorial #programming