I have created a WordPress based web app that will rely on template pages that will host some vue.js different front-end apps. I've added this code to the theme functions file to rewrite all the requests to the index.php file that is the front-controller of each WordPress installation

// Redirect all requests to index.php so the Vue app is loaded and 404s aren't thrown
function remove_redirects() {
    add_rewrite_rule( '^/(.+)/?', 'index.php', 'top' );
add_action( 'init', 'remove_redirects' );

_I've noticed that if I try to reload the registration page, I will always get a 404 error so I need to go back to the home of the website and then click on the registration button I have into the page. Is there any fix I can apply? The registration page is managed by vue router with this code

import { createRouter, createWebHistory } from 'vue-router'
import UserLanding from '../components/UserLanding.vue'
import UserRegistration from '../components/UserRegistration.vue'

const router = createRouter({
    history: createWebHistory(window.location.pathname),
    routes: [
            name: 'UserLanding',
            path: '/',
            component: UserLanding
            name: 'UserRegistration',
            path: '/registration',
            component: UserRegistration 

export default router

Thank you for the support

  • add_rewrite_rule isn't a redirect, what you're doing here is the equivalent of putting query_posts([]); into WordPress core at a very early point then commenting out the main query code. WP parses the ugly permalinks that take the form index.php?queryvar=value and rewrite rules are used to convert pretty URLs like /foo/bar into index.php?foo=bar but no actual redirects or file changes are happening, it's just for figuring out query variables for the main query. Any resemblance to HTAccess type stuff is purely coincidental
    – Tom J Nowell
    Oct 26 at 14:06
  • Is there a possible solution to this?In my case I don't need to change file but simply let know to the vue app that needs to reload the page
    – ICTDEV
    Oct 26 at 14:26
  • assuming you're resaved permalinks what do the rewrite rule testing plugins say when testing the /registration URL, have you considered creating dedicated pages or rewrite rules for those?
    – Tom J Nowell
    Oct 27 at 22:55
  • I don't have a dedicated page due to the nature of Vue app that is a single page. How I can rewrite the url?
    – ICTDEV
    Oct 30 at 8:26
  • you can create a page with that name as a workaround until you solve your rewrite rules problem. Have you tested the URL in a rewrite rule tester plugin to see if it matches your rewrite rule or if something else matches it? Even if it worked you'd still get HTTP 200 for pages that your vue application insist don't exist. It would be sensible to make sure that pages that are important to your Vue app also exist in WP if not for the sake of rewrite rules but for REST API and sitemap purposes. Also my understanding suggests that if your rewrite rule did work it would break the REST API too
    – Tom J Nowell
    Oct 30 at 22:16


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.