New and Shiny Features of Nuxt 2.0

Now we have seen create-nuxt-app, let us also take a look at the other shiny features that also shipped with 2.0

Webpack 4

The new Nuxt version 2 shipped with the latest Webpack version 4. Webpack 4 has been seriously adopted by industry giants because of the stunning speed of boot-up and re-compilation. Asides the speed, Webpack introduced module types and also comes with .mjs and web assembly support.

Other changes:

The experimental option build.dll was removed because it was not stable and also considering the speed of Webpack.

was removed because it was not stable and also considering the speed of Webpack. Default dev tool for client bundle is the Webpack default eval which is the fastest option.

which is the fastest option. Scope Hoisting is enabled by default.

Nuxt-start and Nuxt-legacy

Nuxt-start was introduced in this new version, used to start a Nuxt application in production mode. Then the Nuxt-legacy was added to support the legacy build of Nuxt for Node.

Vendors Leaving…

Although the vendors chunk still exists in this new version, it would now be automatically handled to improve efficiency. From this new release, CommonsChunkPlugin would not be used anymore so you do not have to explicitly define vendors inside your project. Nuxt would automatically add every core package into a hinted cache group, these packages can be Vue, Vue-Router and the likes. This would make the splitting work of Webpack even easier.

Full control over chunk splitting

Previously Nuxt would opt for code splitting by default. While Nuxt tries to provide the most efficient splitting possible out of the box, you can now take complete control over it using build.splitChunks option and optionally disable async chunks per route.

ESM Support

In this new release, ES Modules are now supported everywhere. You can now use the export and import syntax inside your nuxt.config.js file, in serverMiddleware and modules thanks to the std/esm a fast, production ready, zero-dependency package to enable ES modules in Node version 6 and above.

New CLI Improvements

A couple of important improvements in the CLI tool shipped with this new release. Initially, after running nuxt dev you would recall there is always a little time lapse before your app is served on localhost. This is usually due to the fact that Webpack runs two times, once for the client side and then for the server side bundle. Now we have the WebpackBar to help make this all easy and now builds run in parallel.

Developers have also asked for Nuxt support for testing and continuous integration environments and now it is here! Nuxt version 2 would now automatically detect CI and Test environments and will switch to a special mode called minimalCLI with less verbose messages. Finally, all debug messages are now hidden by default, only now showing smarter and better messages for both builder and generator.

Enter postcss-preset-env; Upgrade css-loader

In this new release, cssnext is now deprecated, now you would start to use postcss-preset-env instead of postcss-cssnext. Also, css-loader has been upgraded to now make us use ~assets instead of ~/assets for alias in css data types.

SPA Improvements

As we already know, Nuxt is perfect for building Vue single page applications. One really great part of single page applications can be the page loading indicator. In this new release this indicator has been redesigned to adaptively start showing in the DOM after about 2 seconds. Aria tags were also added to help screen readers detect splash screens. Support for options.render.bundleRenderer.shouldPrefetch and options.render.bundleRenderer.shouldPreload for single page application mode have also been added in this release.

🛑 Deprecations

context.isServer and context.isClient were removed, use process.client and process.server

and were removed, use and options.dev in build.extend() was removed, use options.isDev

in was removed, use Tappable hooks nuxt.plugin() in modules were removed use the new hooks system

in modules were removed use the new hooks system Callbacks for modules was removed, use async or return a Promise

🛠 Tips for Migration

For Webpack, you do not need to change a single line of code in your project. Everything will be automatically migrated as soon as you upgrade to Nuxt 2.

You can remove vendors from nuxt.config.js If you have some in your project safely remove them. If you are a module author, you can keep this.addVendor() for legacy support.

from If you have some in your project safely remove them. If you are a module author, you can keep for legacy support. Stay with defaults. Benchmark your real projects and tailor options with care according to your needs.

⚠️ Breaking Changes

shouldPrefetch is now disabled by default. Due to reports of unwanted page chunk prefetching especially on medium sized projects. Also, all unnecessary resource hints are disabled by default on non-production mode for easier debugging. Manifest chunk is not split by default by Webpack to reduce async requests and is moved into the main chunk. You can enable it by using build.optimization.runtimeChunk: true For production builds, we no longer use file names as a part of chunk names ( /_nuxt/pages/foo/bar.[hash].js becomes [hash.js] ) this helps accidentally leak of you project internals. You can force enable names back using build.optimization.splitChunks.name: true . Nuxt no longer splits layout chunks by default. They will be loaded alongside the main entry-point just like Nuxt core, Plugins, Middleware and Store. You can enable layout splitting using build.splitChunks.layouts: true

Conclusion

We have seen the new Create-Nuxt-App and other cool new features of the Nuxt version 2. You can let me know in the comment section what your favourite features are and if you have use the new Create-Nuxt-App for your Nuxt project. Happy Coding

Learn more