nuxt 2.0.0

v2.0.0

on Node.js NPM

Migration guide for 2.0.0

Your migration is mostly straightforward as Nuxt 2 does not makes breaking changes. So you can try your chance and simply upgrade to Nuxt 2 using yarn add nuxt@^2.0.0 or npm install nuxt@^2.0.0 😉

The long but peaceful approach

• Carefully read release notes
• If you are using a VCS for your project commit and push latest changes and then checkout into a new branch
• Stop any Nuxt process
• [optional] Delete all directories .nuxt, node_modules, yarn.lock and package.lock.json
• Ensure you are using the latest node version (Node 10.x and NPM >= 5 are recommended)
• Upgrade nuxt.config.js, modules and serverMiddleware to use import/export instead of require
• Ensure webpack and vue dependencies are not explicitly set inside your package.json, if so please upgrade them to match Nuxt used versions
• Do npm install or yarn install
• [optional] Use npm outdated or yarn outdated and manually update any other dependency with care
• If you have a CDN deployment system, please make sure you have updated CI/CD configurations to publish .nuxt/dist/clientinstead of .nuxt/dist
• If you are using build.extend, make sure your changes are compatible with Webpack 4.

Still Having problems? Make a bug report at CMTY or reach us using Discord

Major changes

• We now use Webpack 4. We announced 2.x and started publishing latest changes as nuxt-edge package at March. But we wanted to make sure that most of the plugins were updated and stable before releasing a stable version of Nuxt.js
• Due to server/client artifact isolation (PR #3758), external build.publicPath need to upload built content to .nuxt/dist/client directory instead .nuxt/dist.
• ESM is supported everywhere you can now use export/import syntax in nuxt.config.js, serverMiddleware and modules.
• Upgraded to use Babel 7 (PR #3667)
• Use postcss-preset-env instead of postcss-cssnext (notes) (PR #3291), config build.postcss.preset is for postcss-preset-env options
• Introducing nuxt-start for runtime only and nuxt-legacy to support Node < 8
• Due to css-loader upgrade, use ~assets instead of ~/assets for alias in <url> CSS data type, e.g., background: url("~assets/banner.svg") (PR #3741)

Features

• watchQuery lets you observe query strings and execute component methods (asyncData, fetch, validate, layout etc) on change (3d49d8d)
• You can now Ignore pages with a prefix (PR #2594)
• Internal hooks can be set hierarchically in nuxt.config.js (PR #3766)
• Added loading: false option to pages, see example, (PR #3629)
• New stores modules can now be built by a combination of files (actions.js, mutations.js, getters.js and state.js) along with index.js (PR #3636)
• Support functional filenames for webpack assets (PR #3787)
• Server middleware watchers support (PR #3718)
• HTTPS and Unix sockets support out of the box (PR #3831)
• Support server option in nuxt.config.js to set HOST and PORT (PRs #3701)
• Support using NUXT_HOST, NUXT_PORT environment variables (PR #3651)
• Configure Vue directly in nuxt.config.js (PR #3655)
• Add preset option for postcss in nuxt.config.js(PR #3734)
• Make compression middleware customizable (#3863)
• Environment variables starting with NUXT_ENV_ will be automatically included in process.env (#3862)
• no-ssr has been upgraded to vue-no-ssr 1.0.0, it supports placeholderTag

Enhancements

• Fix HTML script tag in core/renderer to remove W3C warning (PR #2971)
• Add render:context hook (PR #3294)
• Replace background-color to background in loadingIndicator (PR #3656), so you can use an image or some gradient for your background in SPA mode!
• Correctly center loadingIndicator when using IE (PR #3779)
• Add watch option to watch custom files to restart the Nuxt.js server (default: nuxt.config.js and serverMiddleware files) (PRs #3633 and #3718)
• Isolate client and server artifacts (PR #3758) for better security of SSR bundles.
• Using webpackbar and consola for a sexier CLI experience and better CI compatibility.
• Change webpack asset names to names for development and to filehashes for production. (PR #3789). Also, prevent assets name collision in dev mode (Issue #3786)
• Call global Vue errorHandler in fetch and asyncData (PR #3652, #3781)
• Error page rendering before redirect (PR #3782)
• Disable template literals in lodash templates (PR #3753)
• Display proper error when the specified plugin isn't found (PR #3672)
• Customize the path to your app.html template in nuxt.config.js (PR #3678)
• Quiet option when building your Nuxt app (PR #3705)
• Minify extracted CSS assets (#3857)
• Add tests to check for changed files (#3893)
• Overwrite store.registerModule to work seamlessly with SSR (#3909)
• Add throttle option to skip progress for fast loads (#3886)

Deprecated

• The vendor array isn't used anymore because of Webpack 4
• We removed DLL support as it was not stable enough and Webpack 4 is much faster now.
• Obsolete AggressiveSplittingPlugin (PR #3545)
• The render.gzip option. Use render.compressor instead.

Internals

• ESLint: Consistent parens in arrow functions (PR #3630)
• ESLint: Require await in async function (PR #3676)
• ESLint: Force dot-notation where applicable (PR #3677)
• ESLint: Force if braces (no lonely ifs) (PR #3685)
• ESLint: Prohibit var (PR #3681)
• ESLint: Prefer const over let (PR #3650)