JSON response for dynamic page based on Accept header

[stefandesu]

Hi! I'm trying out Nuxt for the first time (after using Vue.js for years) for a project that, in addition to the Vue.js front-end, also needs a (fairly simple) back-end.

What I'm trying to achieve is the following: I have a dynamic page /test/[param1]/[[param2]]. When accessed via a browser, a (Vue-rendered) HTML page should be returned. But it should also be possible to use the same route as a JSON API, depending on the Accept header of the request (and possibly based on URL parameters too).

What would the right approach be for this in Nuxt? I've tried to find it in the docs, but the only way I was able to got it working was through a middleware that DOES return something (contrary to the note in the docs that says "Middleware handlers should not return anything"). E.g. with a middleware like this:

export default defineEventHandler((event) => {
  if (!event.headers.get("accept")?.startsWith("text/html")) {
    return { test: "blubb" }
  }
})

But if middleware handlers should not return anything, how are you supposed to achieve something like this?

Any pointers would be really appreciated! Thanks a lot!

[manniL]

You don't need a middleware for that, right? Setting that up in server/routes/test/[param1]/[param2].ts would be enough 😋

[stefandesu]

That was the first thing I tried, but then Nuxt won't serve the Vue page anymore, even if the server route does not return anything. Or is there anything special I need to do so that Nuxt will fall back to serving the Vue page?

[manniL]

Huh, you are right 🤔

[manniL]

Linking #25885 + opened #27105, let's follow along there!

[stefandesu]

Awesome, thanks for creating the issue! I thought it must be possible somehow, but I guess that's only with workarounds. Having a passthrough from a server route to the Nuxt renderer would be an elegant solution IMO. 👍