In nuxt3, I cannot use a netlify.toml file for redirects so I have a _redirects file in the public folder which works.
I have redirects working, but rewrites are not working. The shadowing docs are clear to me but in the following file
/bar /baz 200!
This behaves like a normal redirect. /baz is shown in the url bar, and the content of baz. I would expect to see /bar in the url bar and content of /baz.
Im not sure if this is somehow clashing with vue router
Very likely yes. These client-side routers change the URL to match the component they try to load.
In any case, we’d need a site name to confirm.
Do you know what would cause redirects not to work in a netlify.toml file?
If I have this in public or at the site root, this does not work.
[[redirects]]
to = "/bar"
from = "/baz"
force = true
status = 301
But in a _redirects file in public this does work
/bar /baz 301!
Again, I’d need a site to check before commenting based on assumptions. If you have a link to a deploy, please share that. If not, we might never need a good solution if I continue assuming about your setup and issue.
I have a bare bones site here: https://illustrious-dragon-17f1cd.netlify.app/
This is built with nuxt 3 with npm run generate so it’s SSG.
Since the site is built with npm run generate it will run like a single page app on the frontend and when you click on the link to go to /foo the rewrite does nothing, but if you refresh the page and check the network tab, you will see that indeed the content of /bar is sent back up but what happens is that the url does not stay foo as you would expect it gets changes back to bar
This is expected behaviour from Netlify’s end and more of a Nuxt (or SPAs in general) issue (or a limitation, if you prefer).
Yes, because the request never comes to Netlify. SPAs will fetch the JavaScript chunk and update the page on the client-side. The JavaScript chunk would not match the rule for /foo as it’s served at a different URL. Since a request for /foo is never made to the server, the rewrite never happens.
Yes, because when you refresh, the request for /foo is sent to the server and the rewrite is kicked in.
Nuxt issue. Since you rewrite to /bar, the assets of that page take over. For example, inspect this:
The request is made for /foo, but the HTML is served for /bar (as per your rewrite). It has links to assets for the /bar page. Since those assets know they need to load over the /bar URL, once they load, the URL changes on the client-side to /bar.
Thanks for the detailed reply. I noticed in the network tab that the content for /bar is sent as expected but the url updates. I thought I could get around this with page aliases, which use vue router alias under the hood but that doesn‘t seem to work either.
