So, a while ago I needed this integration for a personal project, and of course I used the all mighty Google, but could not find any step by step tutorial. All the information related to this topic contains Nuxt3 API Routes, but when you want to be a little special 😇 the Universe works against you. You can check the steps below and let me know what you think, or if you have anything you want to add let me know in the comments.

First step

Create a new Nuxt3 app using:

npx nuxi init nuxt3-express

After that, cd into that directory and install the dependencies:

cd nuxt3-express

# Using NPM
npm install 
# Using Yarn
yarn install

You need to create a folder into the root of the project called server-middleware (you can choose the name here, but it needs to be different from server so it will not make a conflict with this) in your project's root directory.

After that, install Express:

# Using NPM
npm install express
npm install -D @types/express
# Using Yarn
yarn add express
yarn add -D @types/express

Second step

Now we can create a basic api with Express. Make an index.ts file in the server-middleware folder.

In the index.ts file add the following snippet:

import express from "express";
const app = express();

app.use(express.json());

app.get("/", (req, res) => {
  res.json({
    message: "🦄🌈✨👋🌎🌍🌏✨🌈🦄",
  });
});

export default app;

It is important to export the express app so that nuxt can use it, so don't forget to do that.

Final Step

Search for nuxt.config.ts in the root of the project and add a serverMiddleware.

import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  serverMiddleware: [
    // Will register file from project server-middleware directory to handle /server-api/* requests
    { path: "/server-api", handler: "~/server-middleware/index.ts" },
  ],
});

The value that you set for the property path in the above snippet will be added before your routes from express.

At this moment, you should be able to navigate to '/server-api` and you will receive:

{"message":"🦄🌈✨👋🌎🌍🌏✨🌈🦄"}

Pretty similar with the Nuxt2 approach, right? 🤔