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
M_igration 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!
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
The post What’s new in NuxtJS 2.8 appeared first on LogRocket Blog.
Top comments (0)