Given the following folder structure

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

How can a rewrite be returned from index.js?

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 => {
  console.log(e.path)
  if (e.path === '/bar') {
    return proxyRequest(e, 'http://localhost:3000/foo')
  }
})