Detect Active Menu in Vue Router and Laravel Plus HTML5 History Mode

Let's Build a Multi-Purpose Laravel + Vue Application is out now. In this series, you learn everything you need to know about Building a complete web application with Laravel and Vue js. So, I am so excited that so many of you guys like my content and keep inspiring me to create more videos. My goals is to inspire you to write better code and better applications.

Open Source At Github.

Here are the things you will learn in this series:

* How use Vue Router with Laravel
* How to Install AdminLTE 3
* How to Use Font Awesome 5 on Laravel
* How integrate mailchimp with laravel
* How to use Laravel Socialite
* How to Login Using Social Media
* How to Use API in Laravel
* Api Auth with Laravel Passport
* JWT with Laravel Passport and JavaScript Request
* Vue Custom Events
* Vue form with Laravel
* Relational Database with Laravel
* Axios and Ajax Request
* ACL in Laravel
* Online Users list
* And much more...

Tags:

JWT with Laravel,tutorial,coding,laravel,laravel and vue js tutorial,laravel and vuejs,laravel and vue js project,laravel admin panel,laravel adminlte,laravel admin,vue js tutorial,vue js,axios,laravel application development,learn laravel 5.6,learn laravel framework,learn laravel,laravel crud,laravel crud tutorial,spa,laravel how to,how to laravel,laravel course,laravel tips,coding tips,admin lte laravel 5.6,adminlte with php,laravel api,laravel passport

[athmanebergueddi]

you can just add active-class="active" exact to router-link like this :

<router-link to="/dashboard" tag="a" class="nav-link" active-class="active" exact>

[ElCucut]

In case you are using Laravel 8, in web.php you should use this route code:
Route::get('/{any}',  [App\Http\Controllers\HomeController::class,  'index'])->where('any',  '.*');

[adam]

Add "linkActiveClass" option to router:
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`
linkActiveClass: 'active'
})

[nektariossourgias]

thank you for the project. so many useful and new information. regarding the regex path, it will work for php 7.3 by escaping character '-' like ([A-z\d\-/_.]+) instead of ([A-z\d-/_.]+) otherwise there will be an error preg_match(): Compilation failed: invalid range in character class at offset

[lashkarram]

Waiting for next tutorial, tremendous job again thanking you for teaching me a things!

[ShabeebRizvi]

For active menu you can also use linkActiveClass: 'active' as below:

new VueRouter({
mode: 'history',
routes,
linkActiveClass: 'active'
})

[dotesislifeeee]

the problem with this is when you enter the incorrect url
for example:
It won't return the Error 404 Page not found (error) anymore. I think its because of the thing that you changed with Laravel routes... If you already have solution on this one, what episode is it? Thank you.

[dsuryas]

I'm getting an error while solving the problem with history mode.
This is the error,

preg_match(): Compilation failed: invalid range in character class at offset 20

[sumeet]

@code inspire: Two question

1) when the website loads i.e. at '/' url, I want to open dashboard.vue (dont want blank).
How to achieve this?
It will never show 404 page i.e if user enters wrong url it ll still load to main page
Isn't that a problem ?

[digiproductmarketer]

I get the following error if I try to refresh the browser ... but clicking any of the menus works prefectly.

preg_match(): Compilation failed: invalid range in character class at offset 20

If I return to /home it works and I can then click on any of the menu items and go to the correct page ... but if I attempt to refresh the browser either by using the refresh icon, or by pressing Ctrl F5, then I get the above preg_match error.

[diegoslinger]

I have finished the lesson. Worked good.

[mohaimenkhalid]

after using history mode, don't return any data from database.. i console my response it shows html templete instead of response data..
i am using axios library..
plz help me... @Code Inspire

[rafaelmeirim]

Good job. Do you teach how to make a single page crud in this series of videos?

[KlorofilASN]

how to handle the menu item, the side bar for the ex Notification?

[suhaibshanaa]

when i refresh the page with url /dashboard displaying to me this ..
preg_match(): Compilation failed: invalid range in character class at offset 20

how can i fix this ?
please

[dotesislifeeee]

After completing this one yes it works as it should be BUT the 404 page not found feature is not working. What should I do? I tried the wrong URL but 404 is not showing.

[lashkarram]

Or /? Is blank? I think some default content required after logging

[lashkarram]

How to separate front and back-end with router?

[bagusSetyawan]

so if instead using new class from the vue router, can i edit some where to change the the name of class given to my own class active template ? anyways thanks for usefull video series, i learned from it

[Shogunez]

in this code !important is works at background-color, will it lead into problem in future?
.router-link-exact-active {
background-color: #00e68a !important;
color: #fff;
}