Nuxt3 + Express API

Mihai-Adrian Andrei - Dec 15 '21 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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

cd nuxt3-express

# Using NPM
npm install 
# Using Yarn
yarn install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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" },
  ],
});

Enter fullscreen mode Exit fullscreen mode

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":"πŸ¦„πŸŒˆβœ¨πŸ‘‹πŸŒŽπŸŒπŸŒβœ¨πŸŒˆπŸ¦„"}
Enter fullscreen mode Exit fullscreen mode

Pretty similar with the Nuxt2 approach, right? πŸ€”

. . . . . . . . . . . . .