WordPress and VueJS routing problem

Question

I am testing the integration of a VueJS app in WordPress. It actually works (no styles yet).

BUT

If I access a URL like https://example.com/my-vue-route/about, the .htaccess URL rewriting redirects any incoming HTTPS request to the index.php of WordPress. So I actually never land on /my-vue-route/about but on the /about page, as WordPress thinks I made a typo.

Is it somehow possible to keep the vue routes out of this URL rewriting?

Answer 1

This is the default WordPress .htaccess:

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

Please add add the following line to it to prevent the default behavior for your custom route.

RewriteCond %{REQUEST_URI} !^/my-vue-route/(.+)

Like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/my-vue-route/(.+)
RewriteRule . /index.php [L]
</IfModule>
# END WordPress