Commands and Deployment

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

Using in package.json

You should put these commands in the package.json:

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

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

Development Environment

To launch Nuxt in development mode with hot module replacement on http://localhost:3000:

yarn dev
npm run dev

List of Commands

You can run different commands depending on the target:

target: server (default value)

  • nuxt dev - Launch the development server.
  • nuxt build - Build and optimize your application with webpack for production.
  • nuxt start - Start the production server (after running nuxt build). Use it for Node.js hosting like Heroku, Digital Ocean, etc.

target: static

  • nuxt dev - Launch the development server.
  • nuxt generate - Build the application (if needed), generate every route as a HTML file and statically export to dist/ directory (used for static hosting).
  • nuxt start - serve the dist/ directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying.

Production Deployment

Nuxt.js lets you choose between Server or Static deployments.

Server Deployment

To deploy a SSR application we use target: server, where server is the default value.

yarn build
npm run build

Nuxt.js will create a .nuxt directory with everything inside ready to be deployed on your server hosting.

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

Once your application is built you can use the start command to see a production version of your application.

yarn start
npm run start

Static Deployment (Pre-rendered)

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

To deploy a static generated site make sure you have target: static in your nuxt.config.js.(For Nuxt >= 2.13:)

nuxt.config.js
export default {
  target: 'static'
}
yarn generate
npm run generate

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

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 generate 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 generate, the context given to asyncData and fetch will not have req and res.

Fail on Error

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.

yarn generate --fail-on-error
npm run generate --fail-on-error

What's next?

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