Deploying a Static Nuxt.js App with Vercel

Nuxt.js is an open-source Vue.js-based framework that provides multiple different rendering modes, one of which allows you generate a static app.

In this guide, you will learn how to create and deploy a Nuxt.js app with Vercel.

Step 1: Set Up Your Nuxt.js Project

The first step in setting up your new Nuxt.js project is to generate it with create-nuxt-app:

npm init nuxt-app my-nuxt-app

Initializing a Nuxt.js project with create-nuxt-app and npm.

When asked which rendering mode you want to use, select Single Page App.

With your Nuxt.js project initialized, move into the directory:

cd my-nuxt-app

Using the cd command to move into the project directory.

Following that, change the build script in the package.json file to the following:

{
  "scripts": {
    ...
    "build": "nuxt generate"
  }
}

Adding a build script to thepackage.json file.

Step 2: Deploying Your Nuxt.js Project With Vercel

To deploy your Nuxt.js app with a Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://nuxtjs.now-examples.now.sh

Set up a Nuxt.js app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.