Skip to main content

Deployment

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

Production Deployment​

Nuxt.js lets you choose between three modes to deploy your application: SSR, Static Generated, or SPA. Photoscope supports two of them Static Generatedand SPA

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'
}

Just run the command below to create the static files.

npm run generate

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

caution

Dynamic routes are ignored by the generate command when using Nuxt. To create static on these pages, please check the Configuration document.

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.