How to create Vue applications

July 21, 2019

In this article we will see how to create vue application with Vue CLI

1 First you install the VUE CLI in your computer. If you already have installed you can skip this step

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2 Then you can create the vue project named vue-routing-example

vue create vue-routing-example

After creating the project you can check whether your project running properly. Use the following command in your terminal

npm run serve

Then you can open the URL http://localhost:8080/ on your browser. Make sure your project is working properly

3 you can use following command to install the vue-router in your app

npm install vue-router --save

4 Now you have to add some code to main.js file to work routing

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

Vue.config.productionTip = false
const routes = [

const router = new VueRouter({
  mode: 'history', 
  routes: routes 

new Vue({
  render: h => h(App),

5 Now you can create the About.vue and Home.vue components

Your About.vue file will have the following code

Your Home.vue file will have the following code

6 Now you can the following code to main.js to configure the routing of your application

const routes = [
    component: Home

    component: About

7 Now you can add the following code to App.vue to work routing

Vue logo

Now you check with following URLs