The modern Property

This feature is inspired by vue-cli modern mode

  • Type: String or Boolean
    • Default: false
    • Possible values:
      • 'client': Serve both, the modern bundle <script type="module"> and the legacy bundle <script nomodule> scripts, also provide a <link rel="modulepreload"> for the modern bundle. Every browser that understands the module type will load the modern bundle while older browsers fall back to the legacy (transpiled) one.
      • 'server' or true: The Node.js server will check browser version based on the user agent and serve the corresponding modern or legacy bundle.
      • false: Disable modern build

The two versions of bundles are:

  1. Modern bundle: targeting modern browsers that support ES modules
  2. Legacy bundle: targeting older browsers based on babel config (IE9 compatible by default).

Info:

  • Use command option [--modern | -m]=[mode] to build/start modern bundles:
package.json
{
  "scripts": {
    "build:modern": "nuxt build --modern=server",
    "start:modern": "nuxt start --modern=server"
  }
}

Note about nuxt generate: The modern property also works with the nuxt generate command, but in this case only the client option is honored and will be selected automatically when launching the nuxt generate --modern command without providing any values.

  • Nuxt will automatically detect modern build in nuxt start when modern is not specified, auto-detected mode is:
ModeModern Mode
universalserver
spaclient
  • Modern mode for nuxt generate can only be client
  • Use render.crossorigin to set crossorigin attribute in <link> and <script>

Please refer Phillip Walton's excellent post for more knowledge regarding modern builds.