API: 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:

• Modern bundle: targeting modern browsers that support ES modules
• 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, for example: in 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:

• Modern mode for nuxt generate can only be client
• Use build.crossorigin to set crossorigin attribute in <link> and <script>

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