Vue.

js Tutorial:
How to Create
Vue.js App in 5
Minutes?
This content was originally published at
https://www.blog.duomly.com/vue-js-tutorial-how-to-create-vue-js-app-in-5-
minutes/

***

Vue.js is getting more and more popular,

becoming a meaning competitor to
frameworks like Angular or React.js. As a
beginner-friendly front-end framework, it
successfully conquers the hearts of
junior front-end developers and people
who just started to learn front-end
programming.

So, as a person who started to learn

front-end, you probably would like to
practice your knowledge and write a
simple app using your new skills.

That’s why in this article, I want to

show you how to build a simple Vue.js app
with Bootstrap and REST API in 5 minutes,
similar to how I did with the React.js
app in one of the previous articles.

To create this app, it would be a plus to

have a basic knowledge of HTML, CSS, and
Javascript.

Also, some basic understanding of Vue.js

may be helpful. I have a Node.js and yarn
installed on my computer, and you need it
as well to follow the instructions.

Let’s start!

P.S. If you prefer video tutorials check

out this youtube episode!

Create Vue app on Youtube

1. Install @vue/cli
I will start by installing Vue CLI, a
tool that will make our start much
easier. Using Vue CLI, we can create
ready to use Vue.js application, with all
needed dependencies. To install the tool,
I’ll use the following command in my
command line:

yarn global add @vue/cli

If you prefer to use npm you can use this

command:

npm install -g @vue/cli

It will work in both cases. After

installation is done you should see the
following screen:
2. Create a project
Now, it’s super easy to create the
project using the Vue CLI tool; it’s a
matter of one command.

Now, navigate to the selected folder

where you want to create your app in the
command line and then run the following
command, where vueapp is the name of our
project.

vue create vueapp

You can choose any different name for

your app, depending on your preferences.

After the command runs, you will see an

instruction to pick a preset and two
options like in the screen below:

To make it easy and not overcomplicate,

I’ll select the default preset, and press
enter.

Then the installation will start, and it

may take a few seconds. After it’s
finished successfully, you will see a new
vueapp folder (or different depending on
the name selected), and you are able to
run your project.

Let’s do it!
3. Start a project
After creating a new project is done, you
will see further instructions on what to
do to start the app.

So, according to the instructions, let’s

go to vueapp folder (or different
depending on the selected name), and then
let’s run:

yarn serve

Or

npm run serve

if you used npm. After loading, you

should see the following screen in your
command line:
The app starts on http://
localhost:8080/ by default, but you can
change the port number if you wish.

Let’s open the browser to check what’s

inside our newly created project by
running the localhost address in the
browser window.

You should see the following screen.

Great, it seems our app works fine, so

now let’s create a new component and
display it!
4. Create a new component
Let’s open our app file in your favorite
code editor, and let’s go to ./src/
components folder.

Inside components folder, let’s create

Users.vue file. Inside an empty file,
please create a code like in the example
below:

<template>
<h3> Users:</h3>
</template>

<script>
export default {
name: 'Users',
}
</script>

<style>
h3 {
margin-bottom: 5%;
}
</style>

Now, let’s set this component to be

displayed in the browser. To achieve
this, go to the App.vue file and change
the component to remove HelloWorld.vue
component and display Users.vue component
instead.
Your final code in this file should look
like below:

<template>
<div id="app">
<Users />
</div>
</template>

<script>
import Users from './components/Users.vue'

export default {
name: 'app',
components: {
Users
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-
serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

It’s time to check if our changes work

and are visible in the browser. Let’s
reload the app, and you should see the
following content:

It seems like everything went well, now

we are going to create an API call.
5. Create an API call
Fine, now I’m are ready to create a call
to the API. I’m going to use a faked API
fromJSONPlaceholder website (https://
jsonplaceholder.typicode.com/users/).

To get the data, I’ll use the axios.

First, I have to install axios, so let’s
switch to the command line and use the
following command to install axios:

yarn add axios

or

npm install axios

if you used npm. After axios is installed

successfully, let’s import it inside
script tags of Users component:

<script>
import axios from 'axios';

export default {
name: 'Users'
}
</script>

Before creating an actual API call, let’s

take a look at how the data we will get
as a response looks like:
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server
neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
 "zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic
contingency",
"bs": "synergize scalable supply-chains"
}
},
…

Okay, now let’s add data() function which

will return users and set it to null for
now, later I’m going to save the API
response to the variable, and after that,
I’ll create an actual API call using
axios get method:

<script>
import axios from 'axios';

export default {
name: 'Users',
data() {
return {
users: null,
};
},
 created: function() {
axios
.get('https://
jsonplaceholder.typicode.com/users')
.then(res => {
this.users = res.data;
})
}
}
</script>
6. Display the data
It’s the time to use Bootstrap to create
a nice, simple template. Let’s go to ./
public folder to update an index.html
file.

In the head section of the file, place

the link to Bootstrap styles:

<!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">
<link rel="icon" href="<%= BASE_URL
%>favicon.ico">
<link rel="stylesheet" href="https://
stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/
bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/
iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>tutorial</title>
</head>
<body>

Now, I’m going to create a template with

a table to put inside our data. I’m going
to use a v-for directive and v-bind:key
to assign the key to each element.
<template>
<div class="container">
<h3> Users:</h3>
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" v-
bind:key="user.id">
<th scope="row">{{user.id}}</th>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.address.city}}</td>
</tr>
</tbody>
</table>
</div>
</template>

And voila! Our app is ready!

Conclusion on create Vue app

In this article, I created a simple

Vue.js application with getting data from
API.

To create an app I used Vue CLI, axios

for API call and Bootstrap for styling.
As a result, I got an app with a listing
of users in the table template.

I hope you will find this tutorial

helpful and use it as a base for your
first Vue.js application training.

The similar tutorial you can watch as a

Youtube video above if you feel more
comfortable with this kind of tutorial.

Have a nice coding!

Table of contents:
• 1. Install @vue/cli
• 2. Create a project
• 3. Start a project
• 4. Create a new component
• 5. Create an API call
• 6. Display the data
• Conclusion