Learn to Code via Tutorials on Repl.it!

← Back to all posts
🚀 Creating a VueJS app: A tutorial for beginners 👏
eankeen (1945)

🚀 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:

https://storage.googleapis.com/replit/images/1551320145285_7902b5fac4930095a9cc332a4ff500a8.pn

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)
https://storage.googleapis.com/replit/images/1551328064026_49702d996ecc9b279cd629e0ee1c150c.pn

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

Comments
hotnewtop
ionutchi (0)

<button-container></button-container>

AnoraAlvarez (1)

Boring don’t take it personal I just don’t like coding

maxina (43)

@AnoraAlvarez Then why are you here...

breedarrenkamp (1)

@AnoraAlvarez Then why are you on a website for people that code and like coding?

Gasparo (1)

Thanks alot even if its 2 years old.

[deleted]

Instead of claps, let's type upvotes, well that's a spamming of upvotes!

RahulChoubey1 (128)

I am a coding noob :(

RandomNoob1 (6)

Nice! With this I could make some fine additions to my repls.

fmailscammer (6)

@CoolCoder200089 What is eww? I found it good. Sure there are a few typos (or maybe I just have no clue) but it seemed instructional.

AJPicard913 (1)

Great tutorial man, loved reading this! Just so you know you have a typo I think it should say <button-counter></button-counter> instead of <button-container></button-container>

Thanks again for this awesome tutorial would love to read more things like this.

WyattRynes (2)

dud your good a coding

Rayan81 (72)

Very cool I am upvoting

TravisRaney (11)

hi I have a question for you

Rayan81 (72)

Amazing tutorial thanks @eankeen

CodingBUB (0)

print('Thanks this rly helped')

ninjutsu808 (0)

can anyone give the full code?

MemeManHimself (100)
console.log("Oh dang")
print("This honestly")
<h1>is<strong>amazing</strong></h1>
LADS1NET (0)

thank you for passing this on so helpful and look forward to learning more it is appreciated

PranavKothari1 (0)

it just did not work, but it is awesome