Sage 9 + VueJS app : Remove Hashes on URL (/#/)

sage
1

Hello Guys,

I’m putting my hair off trying to make vue Router working with wordpress.

I have a VueJS 2.0 single app website www.mysite.com directly on the homepage of a Wordpress + sage 9 installation. The app is located on the homepage of wordpress so the whole website is the actual app.

When I activate html5 history mode in Vue-router to have clean url (’/link’ instead of ‘/#/link’ ), everything works fine — the address change to www.mystite.com/projects — but when I access the link directly from the address bar or if I just refresh the current page, I got the 404 page of wordpress/sage9… look like Wordpress take over on each direct access to the site so it doesn’t redirect to the app.

My htacess looks like that :

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.php$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.php [L]
  </IfModule>

My permalinks are configured to be www.mysites.com/%postname%/

Anyone already when through this situation ?

Any help would be greatly appreciated :slight_smile:
Many thank,

Evan

1 Like
2

I believe what you’re missing is a specific rewrite rule to tell WordPress to redirect every single request back to the front page. You can achieve this in two ways:

  1. delete every other template file from your sage theme and only leave the one that starts your Vue app. This way WordPress will always load that template regardless of the request
  2. add something like this to your code to force the redirect:
add_action('init', function () {
    add_rewrite_rule('^/(.+)/?', 'index.php?post_type=page&p=yourHomepageIDHere', 'top');
});

If you go for the second option remember to save and flush your permalink structure for it to take effect.
Hope it helps!

2 Likes
3

I tryed the first option and removed all template file in the /views folder exept template-app.blade.php and of course the partial and layout folder. After this manipulation, when I went directly to www.mysite.com/projects I got a white blank page.
So I renamed my template-app.blade.php to index.blade.php and magic, it works!

Thank you Nicolo for the tips, problem solve!

1 Like