🚀 Nuxt 2 is coming! Oh yeah!

Just 25 days after 1.4.0 release, Nuxt 2 is almost ready. Over 330 commits, 320 changed files, 8,200 additions, and 7,000 deletions not counting other nuxt repositories! OK, it seems LOTS of changes but don’t worry, we tried our best to have only a little amount of breaking changes and focus on stability, performance and better development experience. We just made a summary of the changes.

🏎 Webpack 4 (Legato)

Only this improvement worth a dedicated article. What’s new:

• 🏎 Webpack 4, is FAST!
• 😍 Mode, #0CJS, and sensible defaults
• ✂ Goodbye CommonsChunkPlugin
• 🔬WebAssembly Support
• 🐐 Module Type’s Introduced + .mjs support

For more information please see this article by

Sean T. Larkin

and Webpack Release Notes.

Other changes:

• Default dev tool for client bundle is the webpack default eval which is the fastest option.
• Module Concatenation (Scope Hoisting) optimization is enabled by default.
• Removed experimental option build.dll . It was unstable and webpack 4 is fast enough.

💡 MIGRATION TIP: The good news is that you don’t need to change a single line of code in your project. Everything will be magically migrated as soon as you upgrade to Nuxt 2.

👋 Goodby vendors

Well, we still have vendors chunk but it will be handled all automatically and much much more efficient. From this release, We don’t use CommonsChunkPlugin anymore so you don’t have to explicitly define vendors inside your project. Nuxt automatically adds core packages (vue, vue-router, babel-runtime, …) into a hinted Cache Group. This helps webpack splitting your code in the most efficient way.

💡 MIGRATION TIP: 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. We may start showing deprecation warnings in next releases.

✂️ Full control over chunk splitting

Previously Nuxt was optioned for code splitting. 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.

⚠️ BREAKING CHANGE: 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 Also for more control over webpack chunk splitting you can use build.optimization.splitChunks option.

⚠️ BREAKING CHANGE: 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. (the name is still enabled on devand --analyze mode if not specified)

⚠️ BREAKING CHANGE: Runtime (manifest) chunk is not split by default by webpack to reduce async requests and is moved into the main chunk. You can enable runtime splitting using build.optimization.runtimeChunk: true

⚠️ CAUTION: Nuxt defaults are based on best practices and optimized after some benchmarks with real-world projects. I suggest reading RIP CommonsChunkPlugin by

Tobias Koppers

and analyze bundle after each change using nuxt build --analyze.

💡 MIGRATION TIP: Stay with defaults. Benchmark your real projects and tailor options with care according to your needs.

🔥 Vue Loader 15 and mini-css-extract-plugin

If you don’t hear about vue-loader, it is the thing that parses .vue files into runnable JS/CSS and HTMl. Vue-Loader 15 is a complete rewrite that uses a fairly different new architecture that is able to apply whatever rules defined in the main webpack config to the language blocks inside a *.vue file.

For CSS extraction, we use a new plugin mini-css-extract-plugin which supports On-Demand-Loading of CSS and SourceMaps (CSS splitting) and is built on top of a new webpack v4 feature (module types).

Both are new so expect little inconsistencies until our final 2.0.0 release. (BTW we have fully tested both plugins in different scenarios and they work like a charm!)

Nuxt 💖 ES modules

Now you can useimport and export inside nuxt.config.js, server middleware and modules thanks to the std/esm. A fast, production ready, zero-dependency package to enable ES modules in Node 6+ by

John-David Dalton

.

🖥️ CLI Improvements

We appreciate developers and believe they need an elegant development experience to make great things. So we have reworked many things about CLI.

While using nuxt dev, you may felt a build delay even when CLI shows Nuxt is ready. This is because webpack runs twice. Once for Client and once for SSR bundle. The second one was hidden! So we made builds parallel and created WebpackBar to make life more enjoyable.

Now all debug messages are hidden by default (Can be enabled using DEBUG=nuxt:* environment variable) and instead, we show smarter and better messages for both builder and generator.

A frequently requested enhancement for Nuxt was supporting Test and CI (Continuous Integration) environments. Nuxt 2 automatically detects CI and Test environments and will switch to a special mode called minimalCLI with less verbose messages.

🤷 Remove deprecated features from Nuxt 1.0

• Removed context.isServer and context.isClient (Use process.client and process.server)
• Removed options.dev in build.extend() (Use options.isDev)
• Removed tappable hooks (nuxt.plugin()) in modules (Use new hooks system)
• Removed callback for modules (Use async or return a Promise)

🎌 Experimental Multi-Thread Compiler

While this is going to be an official feature of webpack 5, you can use experimental options.build.cache: true to enable cache-loader and babel cache and options.build.parallel: true to enable thread-loader.

⭕ SPA Improvements

Nuxt.js is a versatile framework for Vue.js developers which means it can be used both Universally (With Server-Side Rendering) or just Client Side (Single Page Application) mode. We have reworked some important areas of SPA.

One of the most important components for SPA is page loading indicator. It is redesigned, goes into the error state if any problem happens and will adaptively start displaying in DOM after ~2 seconds. This helps unnecessary screen flashes if SPA app is loading fast enough. We also added aria tags to help screen readers and search engines correctly detecting splash screen.

Adaptive SPA Loading Indicator with a slow 3G connection

SPA mode uses a special Meta Renderer to add all meta tags defined in nuxt.config.js into page headers for SEO reasons and HTTP2 push support! We have added support of options.render.bundleRenderer.shouldPrefetch and options.render.bundleRenderer.shouldPreload for SPA mode too.

⚠️ BREAKING CHANGE: shouldPrefetch is disabled by default. Many users were reporting 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.

🐰 Can’t wait for the release? Use nuxt-edge!

You can help us by experimenting latest features and enhancements by removing nuxt and installing nuxt-edge NPM package. Feel free leaving us your comments labeled with [edge].

For yarn you can also this command: yarn add nuxt@npm:nuxt-edge (Thanks to the

Benoît Emile

’s suggestion)

💭 Waiting for your feedbacks :)

Nuxt 2 is almost ready. We are doing final checks, improvements, and tests to release stable version as soon as possible. Meanwhile we are looking forward to your feedback at https://nuxtjs.cmty.io