Vue router in Laravel Project

Today we are going to install a “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.

[ads]

[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 a router we use “npm” method.

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

      npm install vue-router

[ads]
it should look like this

[ads]
Now in the Laravel project go into “Resources/app.js”.
And in this file add below given 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 defining “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 the 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]

Upload image using ajax in laravel 5.8