Home > Programming Blog > Vue.js

Vue.js Tutorial: Learn to Build a Web App Quickly

by Didin J. on Dec 28, 2019 Vue.js Tutorial: Learn to Build a Web App Quickly

Learn to build a web app quickly using Vue.js with a comprehensive step by step tutorial

In this Vue.js step by step tutorial, you will learn how to build a web app quickly. What we build is not just a simple web page that displays "Hello World". More than that, this web application display a list of data from the local data, displays data details and shows the Google Maps of the current location in data.

This tutorial divided into several steps:

The following tools, framework, and module are required for this tutorial:

  1. Node.js (Recommended version)
  2. Vue.js
  3. Bootstrap-Vue
  4. Terminal (for Mac/Linux) or Node Command Line (for Windows)
  5. IDE or Text Editor (We are using Visual Studio Code)

You can watch the video tutorial from our YouTube channel. Don't forget to like, share, comment, and subscribe to our channel.


Step #1. Preparation

We need to prepare the environment to create a Vue.js web app. First, we need a Node.js with the working NPM or Yarn command. We assume that you have already downloaded and installed Node.js. Make sure the Node.js command line is working (on Windows) or runnable in Linux/macOS terminal. To check the Node.js and NPM working type this command in the Terminal.

node -v
v10.15.1
npm -v
6.13.1
yarn -v
1.19.2

Next, we will use a Vue-CLI to create a new Vue.js application. Vue CLI is a full system for rapid Vue.js development with the current latest version is 4.1.1. To install Vue-CLI 4 type this command from the Terminal or Node command line.

sudo npm install -g @vue/cli

or

yarn global add @vue/cli

Next, check the version to make sure that you have the 4.x version of Vue-CLI.

vue --version
@vue/cli 4.1.1


Step #2. Create a Vue.js Web App

To create a Vue.js application using Vue-CLI just type this command in the terminal or cmd.

vue create vue-tutorial

Leave every question as default then wait for package installation finished. Next, go to the newly created folder.

cd vue-tutorial

To make sure that created Vue.js project working, type this command to run the Vue.js application.

npm run serve

or

yarn start

You will see this page when open `http://localhost:8080/` in the browser.

Vue.js Tutorial: Learn to Build a Web App Quickly - Vue Home

To start working with this new Vue.js application, open this Vue.js project with your favorite Text Editor or IDE. To use Visual Studio Code, just type this in the terminal after stopping the running Vue.js application by press CTRL+C.

code .

Now, you can continue to the next step.


Step #3. Add Vue.js Router

If you check the dependencies inside package.json, the Vue-router is not installed yet. For that, type this command to install that module.

npm install --save vue-router

or

yarn add vue-router

Before declaring the vue-router, we need to add the required components for this tutorial.

touch src/components/List.vue
touch src/components/Details.vue
touch src/components/Maps.vue

To register or create routes for the whole application navigation, create a router folder and `index.js` file.

mkdir src/router
touch src/router/index.js

Open and edit `src/router/index.js` then add these imports of VueRouter and the required created components.

import VueRouter from 'vue-router'
import List from '../components/List.vue'
import Details from '../components/Details.vue'
import Maps from '../components/Maps.vue'

Declare the routers for each component.

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'List',
            component: List
        },
        {
            path: '/details/:id',
            name: 'Details',
            component: Details
        },
        {
            path: '/maps/:lat/:lng',
            name: 'Maps',
            component: Maps
        }
    ]
})

Next, we need to add <router-view> to the existing landing components. Open and edit `src/App.vue` then replace all templates and Vue script with this.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

Finally, add or register this router file to `src/main.js` by adding these imports of VueRouter and router.

import VueRouter from 'vue-router'
import router from './router'

Register the vue-router after `Vue.config`.

Vue.use(VueRouter)

Modify `new Vue` to be like this.

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')


Step #4. Create an Array of Objects File

We will use the array of objects data dan get from the Javascript file. For that, create a new Javascript file in the root of the project folder.

touch src/Team.js

Open and edit that file then add these lines of the array.

export const Team = [
    { id: 1, name: 'Arsenal',    image: 'arsenal.png', location: 'London (Holloway)', stadium:    'Emirates Stadium',
    capacity:    60704, manager: 'Mikel Arteta', captain: 'Pierre-Emerick Aubameyang', lat: 51.554929, lng: -0.108449 },
    { id: 2, name: 'Aston Villa',    image: 'aston-villa.png', location:    'Birmingham', stadium: 'Villa Park',
    capacity: 42785, manager: 'Dean Smith', captain: 'Jack Grealish', lat: 52.509131, lng: -1.884767 },
    { id: 3, name: 'Bournemouth',    image: 'bornemouth.png',    location:    'Bournemouth', stadium:    'Dean Court',
    capacity: 11364, manager: 'Eddie Howe', captain: 'Simon Francis', lat: 50.735278, lng: -1.838290 },
    { id: 4, name: 'Brighton & Hove Albion',    image: 'brighton.png', location: 'Brighton', stadium:    'Falmer Stadium',
    capacity: 30666, manager: 'Graham Potter', captain: 'Lewis Dunk', lat: 50.861606, lng: -0.083716 },
    { id: 5, name: 'Burnley',    image: 'burnley.png',    location:    'Burnley', stadium:    'Turf Moor',
    capacity: 21944, manager: 'Sean Dyche', captain: 'Ben Mee', lat: 53.789017, lng: -2.230187 },
    { id: 6, name: 'Chelsea',    image: 'chelsea.png',    location:    'London (Fulham)', stadium:    'Stamford Bridge',
    capacity: 41631, manager: 'Frank Lampard', captain: 'César Azpilicueta', lat: 51.481696, lng: -0.190957 },
    { id: 7, name: 'Crystal Palace',    image: 'crystal-palace.png', location: 'London (Selhurst)', stadium: 'Selhurst Park',
    capacity: 26047, manager: 'Roy Hodgson', captain: 'Luka Milivojević', lat: 51.398281, lng: -0.085489 },
    { id: 8, name: 'Everton',    image: 'everton.png',    location:    'Liverpool (Walton)', stadium: 'Goodison Park',
    capacity: 39221, manager: 'Marco Silva', captain: 'Séamus Coleman', lat: 53.438813, lng: -2.966331 },
    { id: 9, name: 'Leicester City',    image: 'leicester.png', location: 'Leicester', stadium: 'King Power Stadium',
    capacity:    32312, manager: 'Brendan Rodgers', captain: 'Wes Morgan', lat: 52.620399, lng: -1.142147 },
    { id: 10, name: 'Liverpool',    image: 'liverpool.png', location: 'Liverpool (Anfield)', stadium: 'Anfield',
    capacity: 54074, manager: 'Jürgen Klopp', captain: 'Jordan Henderson', lat: 53.430846, lng: -2.960844 },
    { id: 11, name:    'Manchester City',    image: 'manchester-city.png', location: 'Manchester',
    stadium: 'City of Manchester Stadium', capacity: 55017, manager: 'Pep Guardiola', captain: 'David Silva',
    lat: 53.483176, lng: -2.200427 },
    { id: 12, name:    'Manchester United',    image: 'manchester-united.png', location: 'Manchester', stadium: 'Old Trafford',
    capacity: 74879, manager: 'Ole Gunnar Solskjær', captain: 'Ashley Young', lat: 53.463077, lng: -2.291334 },
    { id: 13, name:    'Newcastle United',    image: 'newcastle-united.png', location: 'Newcastle', stadium: 'St James Park',
    capacity: 52354, manager: 'Steve Bruce', captain: 'Jamaal Lascelles', lat: 54.975581, lng: -1.621661 },
    { id: 14, name:    'Norwich City',    image: 'norwich-city.png', location: 'Norwich', stadium:    'Carrow Road',
    capacity: 27244, manager: 'Daniel Farke', captain: 'Grant Hanley', lat: 52.622219, lng: 1.309328 },
    { id: 15, name:    'Sheffield United',    image: 'sheffield-united.png', location: 'Sheffield', stadium: 'Bramall Lane',
    capacity: 32702, manager: 'Chris Wilder', captain: 'Billy Sharp', lat: 53.370374, lng:  -1.470880 },
    { id: 16, name:    'Southampton',    image: 'southampton.png', location: 'Southampton', stadium: 'St Marys Stadium',
    capacity: 32384, manager: 'Ralph Hasenhüttl', captain: 'Pierre-Emile Højbjerg', lat: 50.905860, lng: -1.390941 },
    { id: 17, name:    'Tottenham Hotspur',    image: 'tottenham-hotspur.png', location: 'London (Tottenham)',
    stadium:    'Tottenham Hotspur Stadium', capacity: 62214, manager: 'José Mourinho', captain: 'Hugo Lloris', lat: 51.604319, lng: -0.066381 },
    { id: 18, name:    'Watford',    image: 'watford.png', location: 'Watford', stadium: 'Vicarage Road',
    capacity: 20400, manager: 'Quique Sánchez Flores', captain: 'Troy Deeney', lat: 51.649959, lng: -0.401525 },
    { id: 19, name:    'West Ham United',    image: 'westham-united.png', location: 'London (Stratford)', stadium: 'London Stadium',
    capacity: 60000, manager: 'Manuel Pellegrini', captain: 'Mark Noble', lat: 51.538750, lng: -0.016625 },
    { id: 20, name:    'Wolverhampton Wanderers',    image: 'wolverhampton.png', location: 'Wolverhampton',
    stadium: 'Molineux Stadium', capacity: 32050, manager: 'Nuno Espírito Santo', captain: 'Conor Coady', lat: 52.590301, lng: -2.130418 }
];

Because there are local images for the team logo, add an `img` folder inside assets folder then paste the team logos from out GitHub.


Step #5. Show List of Data using Bootstrap-Vue

We will use the Bootstrap-Vue library as the UI/UX for this Vue.js web application. For that, type this command to install the Bootstrap-Vue module.

npm i bootstrap-vue

Next, open and edit `src/main.js` then add these imports of BootstrapVue and Bootstrap stylesheet.

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Add this line after `Vue.config`.

Vue.use(BootstrapVue);

Now, open and edit `src/components/List.vue` then add these lines of codes that contain Bootstrap-Vue templates and a method to get the list of data from the array of objects file.

<template>
  <b-row>
    <b-col cols="12">
      <h2>
        English Premier League
      </h2>
      <b-table striped hover :items="teams" :fields="fields" @row-clicked="details"></b-table>
    </b-col>
  </b-row>
</template>

<script>

import router from '../router'
import { Team } from '../Team'

export default {
  name: 'List',
  data () {
    return {
      fields: [
          { key: 'id' },
          { key: 'name', label: 'Team Name', class: 'text-left', thClass: 'text-center' },
          { key: 'location', label: 'City', class: 'text-left', thClass: 'text-center' },
          { }
      ],
      teams: Team,
      errors: [],
    }
  },
  created () {
    this.teams = Team
  },
  methods: {
    details (team) {
      router.push({ name: 'Details', params: { id: team.id }})
    }
  }
}
</script>

<style>
  .table {
    width: 96%;
    margin: 0 auto;
  }
</style>


Step #6. Show Data Details using Bootstrap-Vue

From the list of teams, users can click the item of the list then navigate to the details page with the ID params. The ID should receive in the details page using Vue.js $route.params. Open and edit `src/components/Details.vue` then add these lines of codes that contain Bootstrap-Vue template components and a method to get single data from the array of objects by ID.

<template>
  <b-row>
    <b-col cols="12">
      <h2>
        Team Details
      </h2>
      <b-jumbotron bg-variant="white">
        <template slot="header">
          {{team.name}}
        </template>
        <template slot="lead">
          <b-img :src="require('../assets/img/' + team.image)" fluid alt="Responsive image"></b-img><br>
          City: {{team.location}}<br>
          Stadium: {{team.stadium}}<br>
          Stadium Capacity: {{team.capacity}}<br>
          Manager: {{team.manager}}<br>
          Captain: {{team.captain}}<br>
        </template>
        <hr class="my-4">
        <b-btn block class="maps-btn" variant="success" @click.stop="showMaps(team.lat, team.lng)">Show Maps</b-btn>
      </b-jumbotron>
    </b-col>
  </b-row>
</template>

<script>

import router from '../router'
import { Team } from '../Team'

export default {
  name: 'Details',
  data () {
    return {
      key: '',
      teams: Team,
      team: {}
    }
  },
  created () {
    const id = parseInt(this.$route.params.id, 0)
    this.team = this.teams.find(x => x.id === id)
  },
  methods: {
    showMaps (lat, lng) {
      router.push({
        name: 'Maps',
        params: { lat: lat, lng: lng }
      })
    }
  }
}
</script>

<style>
  .jumbotron {
    padding: 2rem;
  }
  .maps-btn {
    margin-right: 20px;
    width: 70px;
  }
</style>

Actually, the "find" or "filter" method of the array has an error with the current core-js module. The solution is to update the core-js module to the latest version by type this command.

npm i core-js

Now, we are using this working version of the core-js module.

"core-js": "^3.6.1"


Step #7. Show Google Maps

You can use your own or someone else Google Maps API Key to implementing Google Maps on the web page. To display Google Maps, first, we need to install the google-maps-api-loader module.

npm i google-maps-api-loader

Add a new component to load Google Maps.

touch src/components/GoogleMapLoader.vue

Add these lines of codes that required to load Google Maps.

<template>
  <div>
    <div
      class="google-map"
      ref="googleMap"
    ></div>
    <template v-if="Boolean(this.google) && Boolean(this.map)">
      <slot
        :google="google"
        :map="map"
      />
    </template>
  </div>
</template>

<script>
import GoogleMapsApiLoader from "google-maps-api-loader";

export default {
  props: {
    mapConfig: Object,
    apiKey: String
  },

  data() {
    return {
      google: null,
      map: null
    };
  },

  async mounted() {
    const googleMapApi = await GoogleMapsApiLoader({
      apiKey: this.apiKey
    });
    this.google = googleMapApi;
    this.initializeMap();
  },

  methods: {
    initializeMap() {
      const mapContainer = this.$refs.googleMap;
      this.map = new this.google.maps.Map(mapContainer, this.mapConfig);
    }
  }
};
</script>

<style scoped>
  .google-map {
    width: 100%;
    min-height: 600px;
  }
</style>

Next, implement Google Maps to the Maps component.

<template>
  <b-row>
    <b-col cols="12">
      <h2>
        Team Details
      </h2>
      <GoogleMapLoader
        :mapConfig="mapConfig"
        apiKey="AIzaSyBgZZK8umUqJn8d5CoIZqWPJ_qtMfqD9q0"
      >
      </GoogleMapLoader>
    </b-col>
  </b-row>
</template>

<script>
import GoogleMapLoader from "./GoogleMapLoader";

export default {
  components: {
    GoogleMapLoader
  },

  computed: {
    mapConfig () {
      return {
        mapSettings: {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0
        },
        zoom: 15,
        center: { lat: parseInt(this.$route.params.lat, 0), lng: parseInt(this.$route.params.lng, 0) }
      }
    },
  }
};
</script>


Step #8. Run and Test the Vue.js Web App

Right now, we will test all of the functions of the Vue.js web application. Just run again this web app.

npm run serve

And here it is, you can test navigate from the list to the map pages.

Vue.js Tutorial: Learn to Build a Web App Quickly - List
Vue.js Tutorial: Learn to Build a Web App Quickly - Details
Vue.js Tutorial: Learn to Build a Web App Quickly - Google Maps

That it's, Vue.js Tutorial: Learn to Build a Web App Quickly. You can get the full source code from our GitHub.

That just the basic. If you need more deep learning about MEVN Stack, Vue.js or related you can take the following cheap course:

Thanks!

Related Articles

Programming Blog
MongoDB Java Javascript Groovy and Grails Miscellaneous React Native React.js ASP.NET Core Flutter Tutorial Rust CSS 3 HTML 5 Tutorial Ionic Framework Vue.js Node.js Angular
All Articles
Popular Articles:
Zizo Wireless