What’s new in Nuxt 2.8

NuxtJS is one of the fastest growing frameworks for developing VueJS applications. The ability to choose what type of application you can create with it (universal, static generation or single page applications) is one of its unique features.

Since its initial release, it has gathered a lot of attention from the JavaScript community. The VueJS community deeply backs this tool that helps developers build server-side rendered applications using VueJS without in-depth technical know-how. If you look at their GitHub profile, you will see issues being raised and various pull requests being sent by its community members and users to better improve the framework.

There have been many releases from the core team (you can check out this article to see what’s new in v2.7). In this post, I’ll highlight the notable additions to the NuxtJS new release, NuxtJS 2.8.

Improvements

Some improvements have been made to enhance the developer experience when using NuxtJS. Let’s explore some of them.

SSR (universal rendering) logs grouping

Starting in NuxtJS v2.7, all SSR logs were being reported to your browser console. You no longer had to switch screens. As you can see in the image below the result of all of your logs appear directly in your browser.

However, things can get messy when you try to log two or more things at a time as your browser logs will constantly be littered. Starting with NuxtJS v2.8, SSR logs are now grouped to avoid polluting the browser console.

Code building indicator in the browser

Another exciting feature shipped with NuxtJS v2.8 is an indicator showing you the build status of your new changes right in your browser.

This is useful especially when your app takes some time to build. Now, you can quickly see the status in your browser rather than having to switch to your terminal to check.

Bug fixes

A few bugs have been fixed with the new release. These bugs fixes are geared towards improving developer experience or addressing concerns expressed by the community.

Smart reloading

Listening on a directory without the supported file extensions could be prone to unnecessary reloads due to file changes which are not used directly by NuxtJS. Eg *.swp, *~ or *.bak files used by editors. Starting from v2.8, NuxtJS only listens for file changes for supported extensions. So you no longer have to worry when a new file (not being used directly by NuxtJS) is created.

Automatic detecting of page directory creation

Pages are an integral part of universal applications. They allow for different files to be created and automatically routed within the application. This is the default behavior of NuxtJS. However, when pages are created to see them in action you will have to restart your server. In v2.8, you no longer have to do this as NuxtJS now detects when you create a page/ directory and will reload itself automatically.

Simplified mount error logs

When creating applications, most times errors are bound to occur. Instantly seeing proper error messages when they happen will make the debugging process faster and easier. From Nuxtv2.8, when an error occurs while mounting your app, the error is logged to the console in dev mode so it’s easier to trace.

Before:

After:

Improved lazy loaded components

NuxtJS supports lazy loading by default. However, sometimes user edits can change this behavior. E.g If the user overrides webpack‘s build options withsplitChunks:{layouts: false, pages: false} pages will be loaded already on running the app. Even though these components are already loaded in your app, when NuxtJS is done with its resolving process they are still lazy loaded. A change in the new update has addressed this issue. Now the lazy loaded components are smaller and improved.

Minified SPA fallback HTML files

Previously, the HTML for the SPA fallback was not minified after generating the routes, resulting in different files while in SPA mode. Minification helps in reducing the number of files used in an app by trimming and grouping related files together.
Before:

$ find examples/spa/dist/ -name '*.html' -exec md5sum {} \;
853e7d39c6c79431172d11c71115d487  examples/spa/dist/200.html
4014fb429eb22afeb868705a0dd476db  examples/spa/dist/about/index.html
4014fb429eb22afeb868705a0dd476db  examples/spa/dist/index.html

After:

$ find examples/spa/dist/ -name '*.html' -exec md5sum {} \;
4014fb429eb22afeb868705a0dd476db  examples/spa/dist/200.html
4014fb429eb22afeb868705a0dd476db  examples/spa/dist/about/index.html
4014fb429eb22afeb868705a0dd476db  examples/spa/dist/index.html

Improved consola

Consola can add custom styles to your console. However, in previous versions of NuxtJS custom styles were being overridden. This has been fixed in v2.8 as consola has now been made optional.

Bundle re-render

Controlling the scripts loaded by your HTML is a matter of writing "inject: false" in the bundleRenderer object in your nuxt.config.js file. However, some JavaScript files are still loaded even after changing the option. This issue has been fixed in the new release. So you control 100% of what goes on in your scripts.

Safe SSR logs

While developing with NuxtJS, you may have come across this error in your terminal:

 WARN  Cannot stringify a function VueComponent                                                                          
 WARN  Cannot stringify arbitrary non-POJOs VueComponent 

and in your browser:

Maximum call stack size exceeded error

It occurs when you try to log a message to your console like this:

created() {
  console.log(this.$route)
}

Although it doesn’t stop your app from running it is not the intended behavior and makes debugging a pain. Starting from v2.8, NuxtJS now safely formats SSR logs.

Dependency upgrades

• Consola v2.7.0
• Connect v3.7.0
• Webpack v4.32
• Babel v7.4.5
• Thread-loader v2.1.2

Migration tip: You need not change a single line of code in your project for any effects. Everything will be automatically migrated as soon as you upgrade to NuxtJS v2.8.

Conclusion

In this tutorial, we explored some new features and improvements in NuxtJS v2.8. We also looked at some deprecated features and future warnings. To see a concrete list of all changes and to know more about the new releases be sure to check out the release page. What is your favorite new feature/API? Share in the comments! Happy coding!