DEV Community

Cover image for Nuxt3 + Express API
Mihai-Adrian Andrei
Mihai-Adrian Andrei

Posted on

Nuxt3 + Express API

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? πŸ€”

Top comments (18)

Collapse
 
leem0n14 profile image
Lee_Moon

Now, in nuxt3 serverMiddleware has been replaced with serverHandlers!
Thank you very much for this article,it really helps me a lot!

like: serverHandlers: [
{ route: '/apis', handler: '~/server-express/index.ts' }
],

Collapse
 
benandy_37fb59ded85e1d6f2 profile image
Benandy • Edited

Can you send link how it's integrate?

Collapse
 
slidenerd profile image
slidenerd

what if I have a separate project as backend and another one with nuxt as frontend and want to connect both of them?

Collapse
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

You can just just make http calls from nuxt to your server ( using axios ).

Collapse
 
slidenerd profile image
slidenerd

interesting but wont that create a problem? your nuxt frontend will be running on localhost:8080 while your backend runs on say localhost:3000

Thread Thread
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

You will need to add cors on your server. And specify localhost:8080 there.

Thread Thread
 
slidenerd profile image
slidenerd

if it isnt too much to ask, could you kindly add another nuxt + express api article but this time show how cors is done, your current article wouldnt need much changes from what i understand

Thread Thread
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

Sure. I will make one. You want it with nuxt2 or nuxt3?

Thread Thread
 
slidenerd profile image
slidenerd

whatever you are comfortable with, if you could do nuxt 2 that would be great, if you want your article to have the future in mind nuxt 3, if there is not much difference between both,perhaps make a single article with 2 sections inside, super appreciated!

Thread Thread
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

Hello. I created a repo that you can check here: github.com/mihaiandrei97/express_n...

Thread Thread
 
slidenerd profile image
slidenerd

extremely helpful!! just a curious question though, your nuxt config file says ssr false, does anything change if ssr is true

Thread Thread
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

The deployment. If you choose ssr true, you need to deploy the app to a node server. If you choose ssr false, you can deploy it as static website to netlify for example.

Collapse
 
jackysupit profile image
Jacky supit

oh wow, thank you!!! you have no idea how this save my head from this hours headache :')

Collapse
 
slidenerd profile image
slidenerd

also on your profile you misspelled Python :) by mistake

Collapse
 
mihaiandrei97 profile image
Mihai-Adrian Andrei

Thanks :D

Collapse
 
danielkjcoles profile image
Daniel KJ Coles

Awesome, thanks for this!

Collapse
 
laxman16in profile image
laxman16in

getting 404 page not found

Collapse
 
bigjihua profile image
JiHua

me too