Getting Started With Vue CLI with Vue Router

We know Vue is already a great Javascript library that allows you to create dynamic, front-end applications for single page application.

Single Page Application(SPA) is different then serve side application like asp.net or PHP.
Server-side application rending and routing different routes on the backend and getting a fully rendered page as a response.

For SPA page rending and routing on the front-end and only sends requests to the server when new data is needed or needs to be refreshed or saved.

So for SPA can improve the responsiveness of your web application because you can render the pages once and display them dynamically based on the current context of the application.

Routing and SPA fully supported in Vue. Vue has router library called vue-router. Now we are going to use Vue CLI command line installer to create a project.

Open a terminal and execute the following command.

 
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project

Ref: https://vuejs.org/v2/guide/installation.html#CLI
Once you execute it will be prompted, answer the questions displayed on the screen like so. Make sure to answer "yes" for installing vue-router and other options.
Once the app is set up, install all the dependencies and start up a dev server.

 
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Now you will see the application run on http://localhost:8080 browser. You will see the default layout provided by the vue cli.

Default its given HelloWord components in the application but we want to use the route for SPA application.

Going to create new components "First.vue" file under the components folder and add the reference on "index.js" file under the Route folder.



Refer above image with the highlighted section, have added First component routing for "/first" page.

Modified on App.vue page and added two links to navigating on HelloWorld and First component.

Following is the change in App.vue page.


For HelloWorld pointed to default page("/" ) and First pointed to "/first" page. Now we are set to navigate the pages for default to first and visa versa.

Basic routing is done here with Vue application. If you have a mark on the URL there is the # with URL. If you want to remove the # mark from the URL then you should do a modification of the mention routing file.

Add mode: 'history' on Router object.

 
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',
      name: 'First',
      component: First
    }
  ]
})

Full source code on my Github
Hope you like and take advantage of Vue CLI.

Read More