Deploy Nuxt to Vercel

Having trouble deploying Nuxt JS application to Vercel? Yes, me too. Here's how I deploy Nuxt JS to Vercel. This method is still running on February 1, 2022. Maybe in the future the method of deploying Nuxt applications on Vercel will change and this method can no longer be used.

1. Create a file called vercel.json in the project root

This is the contents of the code from the vercel.json file:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}

2. Login to Vercel, then click New Project

After logging in, you will be redirected to a kind of dashboard page. Click the New Project button to create a new project.

3. Import project from Git repo

Find your project and click Import. I think this is the easiest way to import our project.

4. Configure Project

Vercel can automatically detect what technology / framework we are using in FRAMEWORK PRESET. In the Configure Project section, click Build and Output Settings.

5. Build & Development Settings

Change OUTPUT DIRECTORY to .nuxt/dist by clicking OVERRIDE on the right.

6. If you prefer yarn

If you prefer to use yarn, change it to something like this. Click Save, and you're done. Just wait, later your application can be accessed via the URL provided. Usually it will be quick or takes at most 24 hours.

7. That's all

Deploying for free on Vercel is useful for testing our application or just want to show our client the appearance or UI.

Thanks for reading.