Returned data being rendered instead of page structure in Nuxt

Question

I'm trying to return data as JSON from the express server for a route. The data returns fine but when i open the NUXT page on the browser than the JSON data gets outputted instead of the page HTML.

Note the express route is the same as the page route. I know the routes are conflicting with each other. Do i need to have the server and front-end on different ports? Is there anything wrong i'm doing here?

Thanks

Answer 1

To avoid conflicts such as that you should use a prefix like /api/ or /api/v1/ something like that

In nuxt.config.js you need to define your server middleware

serverMiddleware: ["~/api/index.js"]

That file is your server. At the bottom you need to export it like this:

module.exports = {
   path: "/api",
   handler: app
}

Note here: app is your express app if you use express.js.

This here: const app = express();

If everything worked your root of your API should be available under host:port/api/