Skip to content
← Back to Community
🚀 Creating a VueJS app: A tutorial for beginners 👏
Profile icon
hyperupcall

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

This file cannot be displayed: 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.

Gif of clicking on an HTML button. The button includes the number of times it has been pressed. After each mouse button press, the number increases by one.

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)
This file cannot be displayed: 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

Voters
Profile icon
Hudayyyyy
Profile icon
utterpizdec
Profile icon
AlejandroEscob3
Profile icon
Qwert3
Profile icon
Andrewacuna69
Profile icon
DevidHernandez
Profile icon
longhuanzhou
Profile icon
Corrica
Profile icon
HyperAlternative
Profile icon
DragonProgrammer
Comments
hotnewtop
Profile icon
edeboanini

I've never code in VueJS but with this introduction you make it simple to learn it! Great, thank you!

Profile icon
AgamKapoor
Profile icon
Gasparo

Thanks alot even if its 2 years old.

Profile icon
[deleted]

Good introduction to Vue.js

Profile icon
TheH4ck3r

yea

Profile icon
CoolCoder200089

eww..

Profile icon
RandomNoob1
Profile icon
fmailscammer

@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.

Profile icon
Gsquadgamers
Profile icon
Imthebestthe
Profile icon
firefish
Profile icon
lthon09

@Imthebestthe maybe your hands are super hurt rn xd

Profile icon
SharpRhyme
Profile icon
SharpRhyme

@SharpRhyme oh ye btw I accidentally left my auto clicker on so
Screen Shot 2021-04-23 at 11.23.37 PM

Profile icon
RayvelArjoon
console.log('This is a nice tutorial!');
Profile icon
RahulChoubey1

@RayvelArjoon

#include <iostream> int main(void) { std::cout << "I now know some VueJS!" << std::endl; }
Profile icon
RayvelArjoon

@RahulChoubey1

#include <iostream> using namespace std; int main(void) { cout << "That's cool" << endl; }
Profile icon
RahulChoubey1

@RayvelArjoon I like typing std:: each time, especially when handling other namespaces

Profile icon
SaltyToxicity

@RahulChoubey1
in that case, you should add std:: before endl because else it will crash

Profile icon
RahulChoubey1

@SaltyToxicity I found it :> thx

Profile icon
RixTheTyrunt
{"message": "SUPER DUPER COOL!"}
Profile icon
AmoghTheCool

Why has nobody mentioned Go yet?

package main import "fmt" func main() { fmt.Println("Super useful tutorial.") }
Profile icon
kringzo

that's amazing! great job!

Profile icon
codesauce3

thank you for the introduction to Vue.js

Profile icon
traleeee

i have a question!
Why if i put the

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

After the

let app = new Vue({ el: '#app', data: { myText: 'Something here ♥' } });

and it just showing the text in the myText

tag. Nothing showing in the button-counter.
But if i put the code of button-counter above. It works perfect? :/

Profile icon
xrosoff

Same with me, it's not showing the button-counter @traleeee

Profile icon
programmeruser

@xrosoff you have to define the component before you can use it in a app.

Profile icon
RahulChoubey1
Profile icon
programmeruser

@RahulChoubey1 no, Vue.component is a function that defines a component, it isn't hoisted. You're mixing up the native syntax for defining functions with a function call.

Profile icon
RahulChoubey1

@programmeruser no. I was just making sure I understood the term.

😕

Profile icon
Baconman321

@RahulChoubey1 Hoisting merely has to do with using variables before they are declared. It's not something you should generally use and also doesn't work with let and const declared variables.

Profile icon
RahulChoubey1

@Baconman321 Oh… okay.

Profile icon
RixTheTyrunt

And with classes ;)

Profile icon
thomasgeysen

awesome

Profile icon
1Tonny

this was very interesting. this was my first time trying to understand the dev world.

Profile icon
WyattRynes

dud your good a coding

Profile icon
daisukef

Great tutorial. I'm new to VueJS.

As @traleeee said, I believe it's important to place the component function before app declaration. It's worth mentioned in this tutorial.

First I was stuck with it too.

Profile icon
hyperupcall

@daisukef @traleeee aye thanks for pointing it out - i added that so hopefully other folks wont have to worry about that making that mistake

Profile icon
daisukef

@eankeen Thanks! 👍

Profile icon
LisaResnick

Nice

Profile icon
TillyClosier
Profile icon
python88

amazing!

Profile icon
Samm0s15

Cool!

Profile icon
Rayan81

Very cool I am upvoting

Profile icon
TravisRaney

hi I have a question for you

Profile icon
Nimgimli

Your code uses "button-counter" but the explanatory text uses "my-counter"

Profile icon
HackermonDev

Didn't work for me for some reason. This is my repl: click me

Profile icon
Nimgimli

@PDanielY You need the inside the Vue div.

So you have:

Try

(I made the exact same mistake!)

Profile icon
HackermonDev

@Nimgimli lol, thanks

Profile icon
vlambertino2018
Profile icon
zplusfour

@PDanielY, this is you when you was a noob coder :P

Profile icon
HackermonDev

@ZDev1 yea lol

Profile icon
zplusfour
Profile icon
[deleted]

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

Profile icon
RandomNoob1

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

Profile icon
AJPicard913

Great tutorial man, loved reading this! Just so you know you have a typo I think it should say instead of

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

Profile icon
Tyrone420

bad

Profile icon
[deleted]
Profile icon
FadimeOzdemir

Nice tutorial!

Profile icon
IsabelHualcas

hello

Profile icon
Rayan81

Amazing tutorial thanks @eankeen

Profile icon
alij1

no

Profile icon
RahulChoubey1

I think that's the production version. Is it possible to use the development version so I can use the Vue DevTools?

Profile icon
CommanderGL

it doesn't work