Skip to content

v2.0.0

Compare
Choose a tag to compare
@Atinux Atinux released this 21 Sep 10:57
7a68e1d

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)