The modern property

Build and serve a modern bundle


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

  1. {
  2. "scripts": {
  3. "build:modern": "nuxt build --modern=server",
  4. "start:modern": "nuxt start --modern=server"
  5. }
  6. }

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:
ssrModern Mode
trueserver
falseclient
  • 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.