🚀 Creating VueJS app: Tutorial for beginners 👏

VueJS is one of the easier JavaScript frameworks for beginners to get into. It is a full featured JS framework that has the most stars of any JS framework on GitHub. I'm going to be explaining how to use the basics of this framework. I'll overexplain some parts, specifically the parts that tripped me up when I first started getting into VueJS and web dev.

Prerequisites

Intermediate experience with HTML and CSS
Beginner / Intermediate experience with JavaScript

Getting started

Boilerplate

After, creating a new HTML, CSS, JS repl, fill in the standard HTML boilerplate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My VueJS App</title>
</head>
<body>
  
</body>
</html>

Next, add a link to the VueJS code from the CDN. Make sure you also create an index.js file and include it in your HTML.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="index.js"></script>

Let's use some Vue! 🎉

In your HTML, all you have to do is add a div inside of your body tag with the id of 'app'. You're teling VueJS that your Vue app is going to be inside of <div id="app"></div>, and telling it to render the data called myData.

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

So, you're whole index.html file is going to be looking like this:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>My VueJS App</title>
</head>

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="index.js"></script>

</html>

Now, all we have to do is create the JS part so it makes more sense. Inside the index.js, create a new Vue instance, passing an object as a parameter. Store that instance in the variable called app.

let app = new Vue({});

However, that won't work just yet. We need to tell Vue more information:

let app = new Vue ({
  el: '#app',
  data: {
    myData: 'Super cool VueJS application 🖖'
  }
})

Boom! That is all your JS. Now Vue knows to render our Vue app in the HTML element that has the id of "app". Inside of the object data, we're declaring a property called myData, which is a string of text. This yields the following:

Components

Breaking up our application into smaller components will help make our application more maintainable. It's good practice to do this whenever it makes sense.

For starters, we're going to be making a button component, shown below.

To create a component, just use the component function and pass in a few parameters. Make sure that you create your component before you create the app with new Vue({...})

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">{{ count }} 👏 claps</button>'
})

This may be a lot, so I'll break it down. The first parameter is a string my-counter. We'll use it later when creating the component in the HTML.

The second parameter is an object with properties data and template.

The first property is data. It is a function that returns an object. This object contains the data of the component, in this case, count.

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  }
})

If it's a bit hard to understand what's going on, try reading the following code. Below, we explicitly create an object called obj, then return obj.

Vue.component('button-counter', {
  data: function () {
    let obj = {
      count: 0
    }
    return obj
  }
})

The second property template is a string that you can think of HTML. We create a button. The button will include the variable count, with some other text.

Vue.component('button-counter', {
  data: function () {
    let obj = {
      count: 0
    }
    return obj
  },
  template: '<button v-on:click="count++">{{ count }} 👏 claps</button>'
})

What is this v-on:click="count++"?
It is special VueJS template syntax.
On the left hand side of the equal sign, we have v-on:click. We are telling Vue to perform some action on some click event. Vue is performing some action when it detects a click event that has occured (the user clicks on the button). We can also use v-on:dblclick, or any other event.

The right hand side of the equal sign tells Vue what to do when the user clicks on the button. In this case it increments the variable count. We can do other things like call functions, but that's outside the scope of this tutorial.

So when a user clicks the button, count increases by 1.

Now just put your button component in your HTML, just like you would with a p or div tag:

<div id="app">
    <p>{{ myData }}</p>
    <button-counter></button-counter>
  </div>
</body>

Since <button-container></button-container> is reusable, we can add as many buttons as we want:

<div id="app">
    <p>{{ myData }}</p>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
</body>

It will yield something like this: (with a bit of extra formatting)

Check out the finished repl here. If you want a more succinct explanation, check out the official website and docs!

https://i.imgur.com/k4rXFkW.gifv