Skip to content
Sign UpLog In
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
786

🚀 Creating a VueJS app: A tutorial for beginners 👏

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

Cannot infer image mime type

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)

Cannot infer image mime type

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

4 years ago

Voters

Comments

TopNew
36
edeboanini
edeboanini

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

3 years ago
4
AgamKapoor
AgamKapoor

@edeboanini
yes

2 years ago
24

Good introduction to Vue.js

4 years ago
14
Gasparo
Gasparo

Thanks alot even if its 2 years old.

2 years ago
2
lthon09
lthon09

@Imthebestthe
maybe your hands are super hurt rn xd

2 years ago
11
SharpRhyme
SharpRhyme

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

2 years ago
9
fmailscammer
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.

2 years ago
7
RayvelArjoon
RayvelArjoon
console.log('This is a nice tutorial!');
3 years ago
2
RahulChoubey1
RahulChoubey1

@RayvelArjoon

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

@RahulChoubey1

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

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

2 years ago
2
SaltyToxicity
SaltyToxicity

@RahulChoubey1

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

2 years ago
1
RixTheTyrunt
RixTheTyrunt
{"message": "SUPER DUPER COOL!"}
1 year ago
2
AmoghTheCool
AmoghTheCool

Why has nobody mentioned Go yet?

package main import "fmt" func main() { fmt.Println("Super useful tutorial.") }
7 months ago
7
kringzo
kringzo

that's amazing! great job!

3 years ago
6
codesauce3
codesauce3

thank you for the introduction to Vue.js

3 years ago
6
traleeee
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? :/

3 years ago
3
xrosoff
xrosoff

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

@traleeee

2 years ago
4
programmeruser
programmeruser

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

2 years ago
2
programmeruser
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.

2 years ago
3
RahulChoubey1
RahulChoubey1

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

😕

2 years ago
1
Baconman321
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.

2 years ago
1
RixTheTyrunt
RixTheTyrunt

And with classes ;)

11 months ago
Load more