Vue.js tutorial: How to create Vue.js app in 5 minutes?

by | Nov 12, 2019 | HTML and CSS, Javascript, Recommended sideber

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 learning from the video tutorial, check it here:

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:

Duomly - programming online courses

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:

Duomly - programming online courses

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:

Duomly - programming online courses

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.

Duomly - programming online courses

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:

Duomly - programming online courses

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": "[email protected]",
    "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": "[email protected]",
    "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!

Duomly - programming online courses

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.

Have a nice coding!

Start learning now!

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

What skills you need to be a good developer?

Every profession has special requirements; for example, to be a doctor, you have to know biology, finish medical university, but besides the hard skills, as a doctor, you have to be emphatic. As a teacher, you need to have qualifications to work with kids, but you...

Angular tutorial

Angular tutorial

Some time ago, I created the first tutorial about React.js where I showed you how to create an easy React.js application using an existing API and Bootstrap for styling. The positive response for this article brought me to the idea of creating a series of simple...

React.js performance tutorial

React.js performance tutorial

Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application. These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to...

8 CSS image filters with code examples

8 CSS image filters with code examples

Using images, we can create an atmosphere, arouse happiness, smile, sadness, or any different emotion. With images, we can show a lot, and tell a lot as well; that’s why pictures are so widely used in the websites and applications. Designers take care of how users...

CSS Grid tutorial

CSS Grid tutorial

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article I showed you how we could do it via flexbox. So, today, I would like to...

18 websites, where you can find a remote job

18 websites, where you can find a remote job

If you are a mum, who needs lots of flexibility in work to take care of kids, or digital nomad who travels a lot and need a job which can be done from different places in the world, or maybe your health issues don’t let you go to the office easily, or maybe you just...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This