DEV Community

Cover image for Nuxt3 App + Serverless API on Vercel
Mihai-Adrian Andrei
Mihai-Adrian Andrei

Posted on

Nuxt3 App + Serverless API on Vercel

Nuxt3 is currently in beta, and we received a way to write API routes as you do in NextJS. However, I didn't find a way to deploy it to Vercel, their documentation is only specifying how to deploy it as a static app.

After some research, it seems it is not that hard. Here are the steps that you can follow to do it yourself:

Step 1 - Create a Nuxt3 project

Create a new Nuxt3 app using:

npx nuxi init nuxt3-vercel
Enter fullscreen mode Exit fullscreen mode

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

cd nuxt3-vercel

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

Step 2 - Create the API route and configure Nuxt.

Create a server folder. Inside that, an API folder with hello.ts. Copy the next snippet inside:

import type { IncomingMessage, ServerResponse } from "http";

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.statusCode = 200;
  const result = {
    data: "Hello world!",

Enter fullscreen mode Exit fullscreen mode

The folder structure should be now:

 ┣ 📂node_modules
 ┣ 📂server
 ┃ ┗ 📂api
 ┃    ┗ 📜hello.ts
 ┣ 📜.gitignore
 ┣ 📜app.vue
 ┣ 📜nuxt.config.ts
 ┣ 📜package.json
 ┣ 📜
 ┣ 📜tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Now, go to nuxt.config.ts and add the following:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  nitro: {
    preset: "vercel",

Enter fullscreen mode Exit fullscreen mode

You can start your project by doing yarn dev or npm run dev, and you go to http://localhost:3000/api/hello you will see the response from our function 😊.

Step 3 - Pushing our code to GitHub ( you can go to step 4 if you already know how to do this )

First, you need to login to your profile on GitHub and press create a new repo near your profile:


After that, you select a name for your repo and press the create button:

In the end, you can follow the instructions from the screen:

For example:

git add .
git commit -m "init"
git remote add origin
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Step 4 - Deploying to Vercel

Login to Vercel and press New project.


After that, select your repo and press Import.


Now, the most important step is the section Build and output settings. The build command should be yarn build or npm run build, depending on what you choose at the start of the project. The output directory needs to be .vercel_build_output (don't miss the dot here).


In the end, hit deploy, and voilà 🔥. The site is deployed.

You can check it live here and the repo here.

Top comments (3)

smppatel99999 profile image
Sahil Patel

Good article on deployment of nuxt3. Helped me deploy the app easily. Thank you :)

mihaiandrei97 profile image
Mihai-Adrian Andrei

Glad I could help!

terwer profile image

Thanks very much,it is very useful.