Remove the # hash from URL when using Vue.js in Laravel Homestead Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Remove the # hash from URL when using Vue.js in Laravel Homestead without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a Laravel 5.2 setup running in Homestead and using Vue.js router to build an SPA. I’m trying to completely remove the #hash from the URL which I know can be done, but I keep getting errors:

I’ve added rewrite ^(.+)$ /index.html last; to my vhosts file in Homestead:

server {

    listen 80;
    listen 443 ssl;
    server_name app.myproject.dev;
    root "/home/vagrant/Code/vibecast/app.myproject.com/public";

    rewrite ^(.+)$ /index.html last;

    index index.html index.htm index.php;

    charset utf-8;

    ...

}

When I restart and open a page I get a 500 Internal Server Error.

Is there anything I need added to routes in Laravel?

var router = new VueRouter({
    hashbang: false,
    history: true,
    linkActiveClass: "active"
})

I can get it working without the #hash (or the modified hosts file) when navigating around, but fails when I reload a page.

Answer

I’ve managed to find a solution, via Matt Stauffer’s demo app. First, no need to update vhosts file. Just need to update the SPA/Vue.js route in routes.php to:

Route::get('/{vue?}', 'AppController@spa')->where('vue', '[/w.-]*');

If you have an admin panel and do not want to consider its prefix

Route::get('/{vue?}', 'AppController@spa')->where('vue','^(?!panel).*$');

And of course initialise the Vue.js router like so:

const router = new VueRouter({
    history: true,
    hashbang: false,
    linkActiveClass: 'active'
})
router.mode = 'html5'

Ref: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

We are here to answer your question about Remove the # hash from URL when using Vue.js in Laravel Homestead - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji