Commands and Deployment

Nuxt.js comes with a set of useful commands, both for development and production purpose.

List of Commands

You can now run different commands depending on the target

server

Command Description
nuxt dev Launch a development server on localhost:3000 with hot-reloading.
nuxt build Build your application with webpack and minify the JS & CSS (for production).
nuxt start Start the server in production mode (after running nuxt build).

static

Command Description
nuxt dev Launch a development server on localhost:3000 with hot-reloading.
nuxt build Build your application with webpack and minify the JS & CSS (for production).
nuxt export Generate every route as a HTML file (used for static hosting with Nuxt >= v2.13).
nuxt serve Serve your production application from dist/ directory (Nuxt >= v2.13).
nuxt generate Build the application and generate every route as a HTML file (used for static hosting with Nuxt <= v2.12).

Arguments

You can use --help with any command to get detailed usage. Common arguments are:

  • --config-file or -c: specify the path to nuxt.config.js file.
  • --spa or -s: Runs command in SPA mode and disables server side rendering.
  • --unix-socket or -n: specify the path to a UNIX socket.

Hooks

Hook Objective
cli:buildError Captures build errors in dev mode and display them on loading screen

Using in package.json

You should put these commands in the package.json:

Nuxt >= v2.13:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt build && nuxt export"
}

Nuxt <= v2.12:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

Then, you can launch your commands via npm run <command> (example: npm run dev).

Pro tip: to pass arguments to npm commands, you need an extra -- script name (example: npm run dev -- --spa).

Development Environment

To launch Nuxt in development mode with hot reloading:

nuxt
// OR
npm run dev

Production Deployment

Nuxt.js lets you choose between three modes to deploy your application: SSR, Static Generated, or SPA.

Server-Side Rendered Deployment (Universal SSR)

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:

nuxt build
nuxt start

You can also set server.https in your nuxt.config.js with the same set of options passed to https.createServer, should you choose to serve Nuxt.js in HTTPS mode. Unix sockets are also available if you set the server.socket option in nuxt.config.js (or -n in the CLI). When using Unix sockets, make sure not to set the host and port parameters otherwise the socket parameter is ignored.

The package.json like follows is recommended:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

Note: we recommend putting .nuxt in .npmignore or .gitignore.

Static Generated Deployment (Pre-rendered)

Nuxt.js gives you the ability to host your web application on any static hosting.

To generate our web application into static files:

For Nuxt >= 2.13:

"scripts": {
    "generate": "nuxt build && nuxt export"
  } 

In your nuxt.config file you need to add the target property with the value of static nuxt.config.js

export default {
  target: 'static'
}

For Nuxt <= 2.12:

"scripts": {
    "generate": "nuxt generate"
  } 
npm run generate

Nuxt.js will create a dist folder with everything inside ready to be deployed on a static hosting service.

To return a non-zero status code when a page error is encountered and let the CI/CD fail the deployment or build, you can use the --fail-on-error argument.

npm run generate --fail-on-error

// OR

yarn generate --fail-on-error

As of Nuxt v2.13 there is a crawler installed that will now crawl your link tags and generate your routes when using the command nuxt build && nuxt export based on those links.

Warning: dynamic routes are ignored by the generate command when using Nuxt <= v2.12: API Configuration generate

When generating your web application with nuxt build && nuxt export or nuxt generate, the context given to asyncData and fetch will not have req and res.

Single Page Application Deployment (SPA)

nuxt build && nuxt export or nuxt generate still needs its SSR engine during build/generate time while having the advantage of having all our pages pre rendered, and have a high SEO and page load score. The content is generated at build time. For example, we can't use it for applications where content depends on user authentication or a real time API (at least for the first load).

The SPA idea is simple! When SPA mode is enabled using mode: 'spa' or --spa flag, and we run build, generation automatically starts after the build. This generation contains common meta and resource links, but not page content.

So, for an SPA deployment, you must do the following:

  • Change mode in nuxt.config.js to spa.
  • Run npm run build.
  • Deploy the created dist/ folder to your static hosting like Surge, GitHub Pages or nginx.

Another possible deployment method is to use Nuxt as a middleware in frameworks while in spa mode. This helps reduce server load and uses Nuxt in projects where SSR is not possible.

Read our FAQ and find nifty examples for deployments to popular hosts.

Platinum Sponsors

Storyblok Support Us