URL Rewrites

[dbzx10299]

After doing quite a bit of research it seems like this is not possible at the moment, and before moving forward I would like to point out that this has some very valid use cases and I am not speaking of redirects.

There is a useful feature called url rewrites where a user can visit /foo and the content of /bar is returned, while the url stays /foo.

Why is this so useful? One of the biggest reasons I can come up with for this is for A/B Testing.

Using netlify with nuxt works great and they already support url rewrites.

export default async (req, context) => {
  return new URL('/bar', req.url)
}

export const config = {
  path: '/foo'
}

If we had the following file structure:

pages/
├── foo.vue
└── bar.vue
nuxt.config.ts

Using netlify edge functions, we can visit /foo and the content of /bar will be returned, but then the url updates to /bar. This happens also using alias which I personally find a bit confusing.

A/B testing would be the perfect use case for something like this because two different layouts could be served for a product page and the url wouldn't change.

Nuxt route rules with the proxy option do not work because vue router matches the component and updates the url.

[typed-sigterm]

Use route rules or in-server fetch

[dbzx10299]

Route rules don‘t work because there is only the option to redirect. I am looking for a rewrite. If you visit /foo and want the content of /bar it works as expected until vue router takes over and updates the url.

[typed-sigterm]

I am looking for a rewrite.

That's related to the server (HTTP 301/302), maybe you can open a issue at https://github.com/unjs/nitro

[dbzx10299]

I can do this with netlify and it works, I navigate to /foo and in the network tab /bar gets sent up as it should. But then vue router takes over and updates the url. This isn‘t related to the server but to vue router since the server is working as it should. I would also note that vue router alias is not a solution to this.

[dbzx10299]

If I write this bit of code with in server fetch, I get /bar returned as I would expect, only vue router updates the url.

export default defineEventHandler(async e => {
  if (getRequestURL(e).pathname.includes('/foo')) {
    const data = await $fetch('/bar')
    return data
  }
})

[Ryanjso]

You can use routeRules with proxy to do this
https://nitro.build/config#routerules

 routeRules: {
      "/api/foo": {
        proxy: { to: "/api/bar" },
      },
    },
    ```