Laravel Vue Router - Tutorial

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:

• Nested route/view mapping
• Modular, component-based router configuration
• Route params, query, wildcards
• View transition effects powered by Vue.js' transition system
• Fine-grained navigation control
• Links with automatic active CSS classes
• HTML5 history mode or hash mode, with auto-fallback in IE9
• Customizable Scroll Behavior

We are going to use vue-router to assign each menu element to the component we want to show. Let's get started!

Setup

Open your terminal and run these commands below:

Install the Laravel application (In this case the project's name is "catgallery" You can choose the name that you want):

Enter to the new directory with the command:

Install Vue:

Install npm:

Install Vue Router:

App.js

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

Import vue-router:

Next we tell Vue to use the vue-router plugin:

Set up the routes (We'll create the components later):

Create the router instance and pass the routes option:

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:

Create and mount the root instance:

resources/js/app.js

Components

Create the vue.js components

resources/js/components/WelcomeComponent.vue

resources/js/components/KittenOne.vue

resources/js/components/KittenTwo.vue

resources/js/components/KittenThree.vue

View

Update welcome.blade.php

Add style css

Add id

Add router-link component for navigation

Add router-view tag. The router use this tag as a container for rendering the different components tied to the different routes.

Add js

resources/views/welcome.blade.php

Styles

Now add some style public/css/mystyle.css

Final Steps

npm run dev

Start the app with the command below:

It's done =)

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

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

Thanks for reading!
Have a nice day, coders💜

Comments

[AlbertoApps]

Hola, buscando sobre Vue encontre tu blog, bueno disculpa por poner en spanish es que mi ingles es malo. Bueno me da gusto haber encontrado y espero contactarte pronto. Se me olvidaba soy Alberto espero que aun te acuerdes.

[camo]

The images are too small.