Deploying a Static Nuxt.js App with ZEIT Now

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 ZEIT Now.

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.

Before deploying with ZEIT Now, provide Nuxt.js with instructions on which directory the build should be output to. Add the following to your nuxt.config.js file:

{
  ...
  "generate": {
    "dir": "public"
  }
}

Adding an output directory to the nuxt.config.js file.

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 With ZEIT Now

With your Nuxt.js app set up, it is ready to be deployed with ZEIT Now.

If you have not yet installed ZEIT Now, you can do so by installing Now CLI.

You are now ready to deploy your app with a single command:

now

Deploying your project with the now command.

Once the app is deployed, you will receive a deployment URL similar to the following: https://nuxt-4l3gekrti.now.sh/