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!

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></body>
</html>

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

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.

If you are looking for more ways to practice Javascript check it here

Have a nice coding! Anna from Duomly