return a rewrite in nuxt3

[dbzx10299]

I did look for an answer to this and I did find one discussion that was started back in 2017. I am struggling to get this to work and since nuxt3 uses vue router for it's pages router, I thought here would be the right place to ask.

For a nuxt3 app with the following folder structure:

pages/
├── foo.vue
└── bar.vue
server/
└── middleware/
    └── index.js

How can a rewrite be returned from index.js?

Here is a link to a live example on stackblitz

This code works just fine, when a user visits /bar they are sent to /foo and the browser url updates accordingly.

export default defineEventHandler(e => {
  if (e.path === '/bar') {
    sendRedirect(e, '/foo')
  }
})

However, what if we wanted to display the content of foo.vue and show /bar in the browser url?

I have tried the proxyRequest(event, target) h3 util function which shows in the network tab that /bar is hit and /foo is returned, but the browser url updates to foo instead of remaining bar

export default defineEventHandler(async e => {
  if (e.path === '/bar') {
    return proxyRequest(e, 'http://localhost:3000/foo')
  }
})

From what I can tell, and maybe I am wrong, but it seems like everything works like it should until vue router takes over and tries to match the url to the component, in other words, we visit bar, foo is returned, and vue router tries to sync the url with the component which is foo.