Nuxt.js

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.

Getting started: create-nuxt-app

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 5.2.0)

$ npx create-nuxt-app <project-name>

Or with yarn:

$ yarn create nuxt-app <project-name>

It will ask you some questions:

1. Choose between integrated server-side frameworks: None (Nuxt default server), Express, Koa, Hapi, Feathers, Micro, Adonis.
2. Choose your favorite UI framework: None (feel free to add one later), Bootstrap, Vuetify, Bulma, Tailwind, Element UI, Ant Design Vue, Buefy.
3. Choose your favorite testing framework: None (feel free to add one later), Jest, AVA.
4. The Nuxt mode you want (<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>)
5. Add axios module to make HTTP request easily into your application.
6. Add EsLint to Lint your code on save.
7. Add Prettier to prettify your code on save.

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:

Better Developer Experience

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 and adding SSR logs

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

Using yarn:

yarn add consola

Using npm:

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.

Build indicator update

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.

File change updates

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 *.swp, *~ or *.bak files used by editors.

Port and new watch settings

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.

Renderer updates

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.

List of Bugs fixed

In the following places, bugs were identified and fixed in this new Nuxt JS version:

• Vue-renderer: Safe format for SSR logs were added and User-Agent‍ to Vary header in modern server mode was also added.
• Server: Now returns listen when listen is called and preserve random port when restarting your server.
• Builder: Watch for pages/ creation when default page displayed was setup and it now only listens for file changes for supported extensions.
• Generator: Single page application fallbacks are now minified.
• Types: Type definition was added for functional babel.presets
• Vue-app: Trailing slash in vue-router non-strict mode is now removed, catch handlers are no more attached to already loaded components. Also fixPrepatch in-out transition was fixed.
• Utils: serializeFunction for edge cases was handled.

Dependency upgrades

In this new version, the following dependencies were upgraded so take note as you update:

• consola v2.7.0
• connect v3.7.0
• webpack v4.32
• babel v7.4.5
• thread-loader v2.1.2

Conclusion

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!

#nuxt-js #vue-js #javascript