DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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!",
  };
  res.end(JSON.stringify(result));
};

Enter fullscreen mode Exit fullscreen mode

The folder structure should be now:

πŸ“¦nuxt3-vercel
 ┣ πŸ“‚node_modules
 ┣ πŸ“‚server
 ┃ β”— πŸ“‚api
 ┃    β”— πŸ“œhello.ts
 ┣ πŸ“œ.gitignore
 ┣ πŸ“œapp.vue
 ┣ πŸ“œnuxt.config.ts
 ┣ πŸ“œpackage.json
 ┣ πŸ“œREADME.md
 ┣ πŸ“œtsconfig.json
Enter fullscreen mode Exit fullscreen mode

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

import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
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:

image.png

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

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

For example:

git add .
git commit -m "init"
git remote add origin https://github.com/mihaiandrei97/nuxt3-vercel-deploy.git
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.

image.png

After that, select your repo and press Import.

image.png

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).

image.png

In the end, hit deploy, and voilΓ  πŸ”₯. The site is deployed.

You can check it live here and the repo here.

Top comments (3)

Collapse
 
smppatel99999 profile image
Sahil Patel

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

Collapse
 
mihaiandrei97 profile image
Mihai-Adrian Andrei Author

Glad I could help!

Collapse
 
terwer profile image
terwer

Thanks very much,it is very useful.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›