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.

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.

it should look like this


Now in the Laravel project go into “Resources/app.js”.
And in this file add below given lines of code.

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

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.

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”

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

Route links will work ,Once we have defined routes

We need to add routes telling what route link should do

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

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

At last, we need to add router instance to Vue instance

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

Now router is all set. Enjoy

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

at the bottom of the page,It will be working

Upload image using ajax in laravel 5.8