How to create a simple Vue.js app in 5 minutes?
Tags: javascript, vue, programming, react
Published: 2019-11-13 18:40:54

---
canonical_url: 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 <a href="https://www.blog.duomly.com/how-to-create-react-app-in-5-minutes/">the previous articles</a>.

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!

{% youtube i43MZ_oSRfs %}

<h4>1. Install @vue/cli</h4>

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:

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/mx8bqe878wnsamnoauep.png)</a>

<h4>2. Create a project</h4>

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:

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/hz0t33irtg8fwl0vky5e.png)</a>

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!

<h4>3. Start a project</h4>

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: 

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/b14okjr6nrnxcmu269d2.png)</a>

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.

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/zj8ke5jupgky2rrtztc3.png)</a>

Great, it seems our app works fine, so now let’s create a new component and display it!

<h4>4. Create a new component</h4>

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:

```javascript
<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:

```javascript
<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: 

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/57w8vlg2xbqrwudzs3fs.png)</a>

It seems like everything went well, now we are going to create an API call.

<h4>5. Create an API call</h4>

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:

```javascript
<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:

```javascript
[
  {
    "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:

```javascript
<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>
```

<h4>6. Display the data</h4>

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:

```html
<!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.

```javascript
<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!

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/i4n3dcbjptc841ptgpue.png)</a>


<h4>Conclusion</h4>
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!

<a href="https://www.duomly.com">![Duomly - programming online courses](https://thepracticaldev.s3.amazonaws.com/i/i5p1tl4bym00d9shuyfp.png)</a>