How to add Vue router in Laravel project [ Updated 2019 ]

How to add Vue router in Laravel project [ Updated 2019 ]

How to add Vue router in Laravel project [ Updated 2019 ]


Vue router in Laravel Project

Today we are going to install “Vue Router” in our laravel application. Using Vue routes we can change pages without refreshing page.It is so quick and these days Developers prefer Vue frontend with laravel backend.

How to add Vue router in Laravel project

[ads]

Installation

Now i hope you guys have Laravel project ready and we are going to install Vue router straight away.Laravel has Vue pre-installed.
To install router we use “npm” method.

open terminal and using terminal go in project directory. Now run below given command to install Vue router.
[ads]

      npm install vue-router

[ads]
it should look like this
How to add Vue router in Laravel project [ Updated 2019 ]
[ads]
Now in the Laravel project go into “Resources/app.js”.
And in this file add below fiven lines of code.

      import VueRouter from 'vue-router'

      Vue.use(VueRouter)

[ads]
Once this step is complete. Now we can add router tag in our file as shown below.

     
Go to about us //on click will open about us page(component) Go to Buy //on click will open buy component // will output the component output

[ads]
In above code we have a div with id of “app”.Vue will display output in this div as id “add” is coming from the instance.

    const app = new Vue({
        el: '#app',
    });

[ads]
Here instance of vue defineing “app” element. So we have “#app” in div.If you want to change it from app to any other name you will have to edit instance code in “Resources/app.js”.

To use components we need to create them in components folder. Here is the code for component “about”

 



[ads]

and include them in “resources/app.js” by importing

      import about from './components/About'

[ads]

Route links will work ,Once we have defined routes

We need to add routes telling what route link should do

      const routes = [
           { path: '/aboutus', component: about },
           { path: '/buy', component: buy }
      ]

[ads]
In above code we have routes array, And it shows what path will show what component.Here path should be equal to the “route-link’s”.

On click of

     

aboutus component will display content as it is defined here

       { path: '/aboutus', component: aboutus },

[ads]
We also need to add router instance in “resources/app.js”. Buy adding

      const router = new VueRouter({
           routes // it is an array defined in above code
      })

[ads]
At last we need to add router instance to Vue instance

     const app = new Vue({
          el: '#app',
          router
       })

[ads]

Make sure you run “npm run watch” to see changes

Now router is all set.Enjoy
[ads]

On view file if you find “router-link” is not clickable then add

at the bottom of the page,It will be working

[ads]
https://18.191.183.98/2019/05/26/upload-image-using-ajax-in-laravel-5-8/