WHAT IS NUXT.JS?

Nuxt.js is a framework built on Vue.js. It is well known for the ability to build SSR (Server-Side Rendering) applications right away, but its use also brings many other benefits, not necessarily related to SSR.

So why should you use Nuxt.js?

SERVER-SIDE RENDERING

To begin with, we must discuss the already mentioned SSR. What does it mean?

Most modern JavaScript frameworks - including Vue, Angular, and React - are built to build SPA (Single Page Applications). SPA, as the name may suggest, is downloaded only the first time the page is loaded, which makes navigating between its subpages much faster than a traditional website. Unfortunately, it also means that the entire page is generated from JS code after the page is loaded, which further delays the display of the content - a normal user will probably not even notice the difference, but the problem is that the page is initially empty, so search engines may have a problem in terms of SEO (Search Engine Optimization).

SSR applications do not have this problem - they rely on having a SPA, but instead of an empty index.html, they return the html rendered on the server side as a response to the opening of a given subpage. This allows you to speed up the loading of individual subpages and improves SEO.

Vue also supports SSR applications, but the proper configuration of such an application in it can be very problematic. Nuxt.js is configured by default for SSR and at the same time provides it with many programming facilities, such as special components or the asyncData method.

More information on this is available here.

ROUTING

One of the most noticeable changes after switching from Vue to Nuxt may be page routing.

Vue uses a standard router - this means that every new page or change of its file location must be reflected in the router.js file.

const routes: Array<RouteConfig> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
]

Nuxt builds a router object internally, based on the folder and file structure in the /pages folder. As a result, adding new pages and changing the names and paths of pages are limited to changes in structure.

LAYOUT

Layouts can be another noticeable change - in Nuxt each page of the application uses one of the created layouts. This allows you to separate the file with application elements that rarely change when navigating between subpages, and to take advantage of the fact that a layout component will not reload until it changes to another.

Each page uses layouts/default.vue by default. Of course, it is possible to create multiple layouts - if you want to use a different one than the default one, it is enough to provide the appropriate name in the page file in the layout option, e.g. with myLayout.vue:

export default {
  layout: 'myLayout',
  ...
}

MODULES

There are many, very easy to add, Nuxt modules that add functionality or provide integration with libraries/services of your choice. Adding them only needs to be installed via npm or yarn and defined in config.

A collection of these modules can be found here.

In addition, Nuxt, after creating a project, allows you to use the Vuex solution popular for the Vue application.

WEBPACK

Nuxt configures Webpack immediately so that the development server compiles the changes on the fly. This means that you only need to save the edited file to see the changes. There is no need to compile the application from scratch each time, as in "pure" Vue.

Of course, configuring Webpack like this for Vue is also possible, but it's not ready right after creating the project and might not be very obvious.

STATIC PAGE GENERATION

One of the more lauded features of Nuxt is the ability to generate a static version of the application using the nuxt generate command.

This brings with it, among other things, SEO improvement and faster loading (similar to SSR), but most of all it means that a server is not required to host the website, so it is possible to use existing services such as GitHub Pages.

SUMMARY

Nuxt offers very efficient SSR applications, but also provides more pleasant programming even if we want to build static or SPA applications.

It is worth using it when SEO/SSR functionality is important to us, or even when we want more from our framework than is offered by "pure" Vue.

Thus, no framework is perfect, and Nuxt is no exception. Modules are very good additions, but since they are separate from the main framework, there may be times when a module is not updated or unexpectedly changes from version to version behaviour. Specifically, I mean one of the modules, namely Nuxt Auth.

Authorization is a very important aspect of many, if not almost all, applications, and the Nuxt Auth module, which should make it easier to implement, actually makes it difficult sometimes - it can lead to unexpected situations and bring it to a working state by tuning and avoiding bugs at the same time -s can be very frustrating (though it's not impossible). At the time of writing this article, work on the next version of the module has been underway for many months.

However, despite its problems, Nuxt.js is still a very good framework and offers a lot.