Laravel Vue Router - Tutorial
Tags: laravel, vue, beginners, tutorial
Published: 2019-09-09 14:35:16

Vue Router is the official router for Vue.js  to make building Single Page Applications by allowing you to link URLs to specific components. 

Features include:
<ul>
<li>Nested route/view mapping</li>
<li>Modular, component-based router configuration</li>
<li>Route params, query, wildcards</li>
<li>View transition effects powered by Vue.js' transition system</li>
<li>Fine-grained navigation control</li>
<li>Links with automatic active CSS classes</li>
<li>HTML5 history mode or hash mode, with auto-fallback in IE9</li>
<li>Customizable Scroll Behavior</li>
</ul>
We are going to use vue-router to assign each menu element  to the component we want to show. Let's get started!

<h2>Setup</h2>
Open your terminal and run these commands below:

<li>Install the Laravel application (In this case the project's name is "catgallery" You can choose the name that you want):</li>
 ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7c2nvum021awbki9p4rb.png)

<li>Enter to the new directory with the command:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7ugm8vz7vkw3wwocphik.png)

<li>Install Vue:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ji51cvhagr4c4mu3hucq.png)

<li>Install npm:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/01btismzoq44cmfjzid6.png)

<li>Install Vue Router:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/82om72sh6ko5ras5t19k.png)

<h2>App.js</h2>
Go to the main JavaScript file resources/assets/js/app.js and update with the code below:

<li>Import vue-router:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/erv3f3umfr2x2zr5zy60.png)

<li>Next we tell Vue to use the vue-router plugin:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/29r1gvpmbyxkjbobq49a.png)

<li>Set up the routes (We'll create the components later):</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kdx596n6ayxcqo1z46il.png)

<li>Create the router instance and pass the routes option:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p29qccoiotek1ockyxfe.png)

<li>To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8c6rx9pkndgqy8x30pkt.png)

<li>Create and mount the root instance:</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l23q9z3cbmqvoi5hth5j.png)

<li>resources/js/app.js</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rz3qjvak166b0cv12elj.png)

<h2>Components</h2>
Create the vue.js components 
<li>resources/js/components/WelcomeComponent.vue</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/82gn8kpcp3bpkdrvo60j.png)

<li>resources/js/components/KittenOne.vue</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ple7pdjzw2ihykcb1kxx.png)

<li>resources/js/components/KittenTwo.vue</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cd2mnzfzt9grtkv5e9c6.png)

<li>resources/js/components/KittenThree.vue</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i3srcam7fefeiwy2jpze.png)

<h2>View</h2>
Update welcome.blade.php

<li>Add style css</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/djuxyufiawkr8a7ll077.png)

<li>Add id</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/51wap7bgbxq61zbny4ia.png)

<li>Add router-link component for navigation</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xh5ly1y9g1cyyocauudc.png)

<li>Add router-view tag. The router use this tag as a container for rendering the different components tied to the different routes.</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/axqhlcfyor8yyv45abxf.png)

<li>Add js</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/45svx3afu9r8pw4qw84z.png)

<li>resources/views/welcome.blade.php</li>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nqdpfbah5tobxss1x8aa.png)

<h2>Styles</h2>
Now add some style public/css/mystyle.css
{% jsfiddle https://jsfiddle.net/lvtdeveloper/4o8x93ap/4/ css %}

<h2>Final Steps</h2>

npm run dev
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hc9godrcq1dcunkhs15m.png)

Start the app with the command below:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7bff8gke72afga81s1ka.png)

It's done =)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3x12xij75qbit2jlq8p7.png)

I hope this example will be of help to you. :cat2:
Be creative and have fun along the way.

Song while I was writing the post :relaxed: https://open.spotify.com/track/4as4XEOR03oGm1STUKl6pa?si=DwWg9bE7Sdmur8OTQ-7ijA

Thanks for reading!
Have a nice day, coders💜