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? 🤔
Top comments (16)
what if I have a separate project as backend and another one with nuxt as frontend and want to connect both of them?
You can just just make http calls from nuxt to your server ( using axios ).
interesting but wont that create a problem? your nuxt frontend will be running on localhost:8080 while your backend runs on say localhost:3000
You will need to add cors on your server. And specify localhost:8080 there.
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
Sure. I will make one. You want it with nuxt2 or nuxt3?
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!
Hello. I created a repo that you can check here: github.com/mihaiandrei97/express_n...
extremely helpful!! just a curious question though, your nuxt config file says ssr false, does anything change if ssr is true
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.
oh wow, thank you!!! you have no idea how this save my head from this hours headache :')
also on your profile you misspelled Python :) by mistake
Thanks :D
getting 404 page not found
me too
Awesome, thanks for this!