Nuxt.JS Commands

From WikiOD

Nuxt.js provides a series of commonly used commands for development or release deployment.

Command list[edit | edit source]
Order describe
nuxt Start a hot-loaded web server (development mode)  localhost:3000 .
nuxt build Use webpack to compile the application, compress JS and CSS resources (for publishing).
nuxt start Start a web server in production mode (it needs to be executed first nuxt build).
nuxt generate Compile the application and generate the corresponding HTML file (used for the deployment of static sites) according to the routing configuration.

If you use a Node.js web development framework such as Koa/Express, and use Nuxt as middleware, you can customize the startup entry of the web server:

Order describe
NODE_ENV=development nodemon server/index.js Start a hot-loaded custom Web server (development mode).
NODE_ENV=production node server/index.js Start a custom web server in production mode (it needs to be executed first  nuxt build).
parameter[edit | edit source]

You can use the --help command to get detailed usage. Common commands are:

  • --config-file or -c: Specify the file path of nuxt.config.js.
  • --spa or -s: Disable server-side rendering, use SPA mode
  • --unix-socket or -n: Specify the path of UNIX Socket.

You can add these commands to package .json:

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

So you can execute the corresponding command through npm run <command>. Such as: npm run dev.

Tip: To pass parameters to the npm command, you need an additional --script name (for example: npm run dev --parameter --spa)

Development model[edit | edit source]

The Nuxt service with hot reload feature can be started in development mode with the following command:

nuxt
 // or
 npm run dev
Release deployment[edit | edit source]

Nuxt.js provides two ways to publish and deploy applications: server-side rendering application deployment and static application deployment.

Server-side rendering application deployment[edit | edit source]

Deploying Nuxt.js server-side rendering applications cannot directly use the nuxt command. Instead, you should compile and build first, and then start the Nuxt service. This can be done with the following two commands:

nuxt build
 nuxt start

The recommended package.json configuration is as follows:

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

Tip: It is recommended to add .nuxt to the .npmignore and .gitignore files.

Static application deployment[edit | edit source]

Nuxt.js can staticize the application according to the routing configuration, allowing us to deploy the application to any static site hosting service provider.

The following commands can be used to generate static directories and files for the application:

npm run generate

This command will create a dist folder in which all static resource files are located.

If your project needs to use dynamic routing , please move to  generate configuration API to  learn how to make Nuxt.js generate static files for such dynamic routing.

Note: When using nuxt generate to staticize the application,  the context object passed to the  asyncData()  and  fetch() methods  will not contain the req and res attributes.

Single page application deployment (SPA)[edit | edit source]

nuxt generate still needs the SSR engine in the build/generate time, has the advantage of pre-rendering all pages, and has high SEO optimization and page loading capabilities. The content is generated at build time. For example, we cannot use it for applications whose content relies on user authentication or real-time APIs (at least for the first load).

The idea of ​​SPA application is very simple! When using, enable the SPA mode mode: 'spa' or --spa, and we run the package, the generation will start automatically after the report, the generation contains common meta and resource links, but does not contain page content.

Therefore, for SPA deployment, you must do the following:

  • Change the mode in nuxt.config.js to spa.
  • Run npm run build.
  • Automatically generate dist/folder and deploy to your server, such as Surge, GitHub Pages or nginx.

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

Please refer  to How to deploy on Heroku?  to view more deployment information.

Please refer  to How to deploy on GitHub Pages?  See more details on how to deploy to GitHub Pages.