All the good-to-know new features in version 2.8.0 of Nuxt JS, with examples
Nuxt is a framework built for creating Vue applications. These Vue applications can be a single page application, a static generated application or a universal application. Nuxt presets all the configuration needed to make developing a Vue Application more enjoyable.
*Nuxt *is made for Vue applications, it is an even easier way to build Vue apps, as Vue is pretty easy to use already Nuxt helps you build Server Side Rendered applications very seamlessly. This is because most of the complicated configurations associated with middleware, routing, state management and asynchronous data are baked into it. Nuxt is to Vue what Next is to React.
To get started quickly, the Nuxt.js team has created a scaffolding tool create-nuxt-app. This is just like the create-react-app for React projects. Make sure you have npx installed (
npx is shipped by default since NPM
$ npx create-nuxt-app <project-name>
Or with yarn:
$ yarn create nuxt-app <project-name>
It will ask you some questions:
<a href="https://nuxtjs.org/guide#single-page-applications-spa-" target="_blank">Universal</a>or
<a href="https://nuxtjs.org/guide#single-page-applications-spa-" target="_blank">SPA</a>)
When answered, it will install all the dependencies so the next step is to navigate to the project folder and launch it with:
$ cd <project-name> $ npm run dev
The application is now running on http://localhost:3000.
Few days ago the newest version of Nuxt JS was released, version 2.8.0 and these are the features that shipped with it:
In this new version 2.8.0, the Nuxt team worked on a few new features to make the developer experience even better than it already is. These features will be discussed below.
Consola is a pretty looking easy to use and elegant console logger for Node JS and your web browser. It has a fancy output with fallback for minimal environments, it also contains pluggable reporters with a seamless and consistent command line interface. It supports tags, web browsers and mocking. You can install it with any of the popular package managers
yarn add consola
npm i consola
Consola in action looks like the gif below, you can see how fancy the logged messages now appear.
Also in addition to Consola, the Nuxt team also added another feature for the console to help declutter the browser console. They kept in mind that developers regularly log messages to test out functions or features and also caught exceptions are also displayed in the console by default. In a bid to make the browser console look a bit more organised and clearer, SSR logs were added to be a kind of expandable and collapsible feature, like UI drop-downs.
This is a feature I love so much, Nuxt JS is way too fast that most times you do not even get to know if your code rebuilt while on your browser, especially if it is a little change in a particular file. The Nuxt team has come up with this simple feature that shows a Nuxt logo sign in your browser indicating component rebuild just took place. It looks like this:
You see the percentage roll almost in a second to a 100, pretty cool for projects with distributed teams or people working on the same project from different machines.
Before this new version of Nuxt, the team observed that the patterns used for listening to file changes contained some duplicates. These duplicates were all removed. Also, there has been an initially used workaround for recreating the watcher on raw events on linux, since the chokidar fix it is no longer needed anymore so it was also removed. All major patterns were also looked into to make them less greedy by always only listening for supported file extensions. A good example is listening on a directory without the supported file extensions could be prone to unnecessary reloads due to file changes which are not used by Nuxt. Eg
*.bak files used by editors.
In this new version 2.8.0, the Nuxt team has set up watches for
pages/ creation when default page displayed, this is the same change that was implemented for
store/ but now applied for
pages/ creation. Also starting from this new version, Nuxt will re-use the same port when randomly assigned when restarting in development environment.
In version 2.6.3 an issue was reported with reproduction links showing that there was a problem with the renderer ignoring injection commands. Nuxt apps should not load scripts if the inject property for the bundler renderer in the config file is false. It was seen to still load some scripts. In response, in this version the
render.injectScripts option has been added to Nuxt and support for
render.ssrLog used to control SSR logs was also added.
In the following places, bugs were identified and fixed in this new Nuxt JS version:
Varyheader in modern server mode was also added.
pages/creation when default page displayed was setup and it now only listens for file changes for supported extensions.
fixPrepatchin-out transition was fixed.
serializeFunctionfor edge cases was handled.
In this new version, the following dependencies were upgraded so take note as you update:
This has been a quick overview of all the new features and bug fixes of the new Nuxt JS version. It also contains a getting started guide for beginners. Happy hacking!
Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.
Responsive ecommerce template built with Vue.js and Nuxt.js