NuxtJS v2.14 Static Generation Improvements

Aug 2, 2020

Introduction

It has been just a week since I published an article about static site generation and now a new version of Nuxt is released. Migrating from pre-v2.13 to v2.14 is now much easier.

Configuration

New Property

We have a new target property for telling Nuxt that we want to export our application for static hosting. In nuxt.config.js we can set this property to static for static hosting or to server for server-side rendering.

export default {
  target: 'static' // default: 'server'
}

Static-aware Commands

Now we have four commands. And these commands behave differently depending on the value of the target property.

nuxt dev

Starts a development server. We can use it for both server and static targets.

nuxt generate

Runs webpack build if needed and export the application to static HTML files.

Since nuxt generate is now smart enough to detect whether Webpack compilation is required, different commands for HTML file creation and Webpack compilation are no longer needed. So nuxt export has been deprecated.

nuxt build

Bundles our Nuxt application for production. Because nuxt generate can now build the project when necessary, we don't need this command for target: 'static'.

nuxt start

Once we generate or build our Nuxt app, we can use nuxt start to start a production HTTP server and serve our static app with supporting SPA Fallback.

SPA Fallback is basically having a single page application inside our static site. For example, we may want to prevent pre-render of pages like /admin or /login. With SPA Fallback these pages will still be accessible with client-side rendering.