The advantages of Nuxt.js as a preferred Vue.js framework

Matt Fitzgerald
Sep 30 · 9 min read

Nuxt.js is a popular framework of Vue.js. If you are a Vue.js developer, you have probably heard of Nuxt.js, but you might not know what this framework is about.

You are probably asking questions like:

  • What’s the idea behind Nuxt.js?
  • What type of applications is Nuxt.js used for?
  • What are the benefits of Nuxt.js?
  • Why do I need a framework for a framework?

In this blog post, we are going to cover all these queries and try to answer all these questions in an elaborative way.


What Is Nuxt.js?

Nuxt.js is a high-level framework that is built using Vue. It simplifies web app development of single-page or universal Vue.js apps. This Vue.js framework abstracts away the details of server and client code distribution so that you can focus only on web application development.

The goal of this framework is for it to be flexible enough for website developers to use as the main project base.

As most of what Nuxt.js does happens during the web app development phase, you get a lot of features with only a few extra KBs added to your JS files.

Let us explore the reasons why you might need Nuxt for your next web development project.


How Nuxt.js Works

When a user visits a Nuxt.js web app or navigates to one of its web pages via <nuxt-link>, here is what happens:

  1. When the user initially visits the web application, if the nuxtServerInit action is clearly defined in the store, Nuxt.js will call this and update the store.
  2. Nuxt.js executes any existing middleware for the web page visited. It checks the nuxt.config.js file in the first place for global middleware, then checks the matching layout file for that requested page, and, finally, checks the web page and its children for middleware. Middleware is prioritized in that particular order.
  3. If that particular route that’s visited is a dynamic route, and a validate() method exists for it, the route is clearly validated.
  4. Then, Nuxt.js calls the fetch() and asyncData() methods to load data before rendering the page. The asyncData() method is widely used for fetching data and rendering it server-side, while the fetch() method is widely used to fill the store before rendering the web page.
  5. At the final step, the page containing proper data is rendered.

These actions are properly portrayed in this schema, gotten from the Nuxt.js docs:


Benefits of Nuxt.js

1. Create universal web apps without the hassle

One of the biggest advantages of Nuxt.js is that it helps in creating universal apps easier.

What is a universal app?

A universal web app is used to describe the JS code that can execute both on the server’s side and the client’s side.

Many advanced JS frameworks, like Vue, are aimed at creating single-page applications, also called SPAs. There are a plethora of benefits to having an SPA over a traditional website.

For instance, you can build very snappy user interfaces that update quite fast. But SPAs also come with some disadvantages like long load times, and Google struggles with these sites because there is no content initially on the page to crawl for search engine optimization purposes. All of the content is generated with JS after the fact.

A universal web app is about having a single-page application, but instead of having a blank index.html page, you are preloading the web application on a server and sending rendered HTML as the response to a browser request for every route to speed up load times and improve search engine optimization by making it easier for Google to crawl the web page.

Nuxt.js immensely helps you write universal web apps more simply.

Creating universal web applications can be a tedious task because you have to do a plethora of configuration on both the client-side and server-side.

This is the problem Nuxt.js aims at solving for Vue applications. Nuxt.js makes it pretty simple to share the same code between the server and the client so you can focus on your web application’s logic.

Nuxt.js also gives you access to various properties like isClient and isServer on your components so you can easily decide if you are rendering something on the server or on the client.

There are also special components like the no-SSR component which is widely used to purposely prevent the component from rendering on the server-side.

In the last, Nuxt.js gives you access to an asyncData method inside of various components that you can use to fetch data and render it on server-side programming.

Now, that is the tip of the iceberg of how Nuxt.js helps you with creating universal web applications. You can learn more about what Nuxt offers for rendering universal web applications from its user guide.

2. Statically render your Vue apps and get all of the benefits of a universal app without a server

One of the biggest innovations of Nuxt.js comes with its nuxt generate command. This command generates a static version of the web app. It’ll generate HTML for every one of the routes and puts it inside of its own file.

For instance, if you have the below-mentioned pages (Nuxt’s term for routes):

Nuxt will generate the following folder structure:

The benefits of doing this are quite similar to the advantages of universal web applications. There is markup there to make loading the page faster and to help social media crawlers and search engines crawl the website.

The difference is that you do not need a server anymore. Everything is generated during the web development phase.

It is powerful as you get the benefits of universal rendering without the need for a server. You can just host your web app on Amazon S3 and GitHub Pages.

You can read more about this in the static generated section of the docs of Nuxt.js.

3. Get automatic code-splitting

Nuxt.js can easily generate a stable version of your website with a special webpack configuration.

For each route (page) that is statistically generated, the route gets its own JavaScript file also, with just the code needed to run that particular route. This can help with speed because it keeps the size of the JS file small, relative to the size of your entire web application.

4. Setup via the command-line with the starter template

Nuxt.js also provides a starter template which is called a starter-template that gives you all the scaffolding needed to get started with a project, with a good structure of folders for organization.

Make sure you have Vue CLI installed, and run the following command:

From there, just cd into the web application and run npm install and you should carry this further.

5. Get great project structure by default

In many small Vue.js web applications, you end up managing the code structure as best you can in different files.

The default Nuxt web application structure provides you with a great starting point for organizing your web application in an understandable manner.

Here are some directories that it sets you up with:

  • Components — A folder so that you can organize your Vue.js components individually.
  • Layouts — A folder to contain your main web application layouts.
  • Pages — A folder to contain your web app’s routes. Nuxt reads all the Vue files inside this directory and builds the web application router.
  • Store — A folder to contain all of your app’s Vuex store files.

6. Set up with an auto-updating server for easy development

As compared to setting up this process by yourself or the change-refresh process that web app developers are used to, creating it with Nuxt is a breeze. It sets up with an auto-updating development server.

While you are developing and working on those few .vue files, Nuxt.js uses a webpack configuration to check for all the changes and compiles everything for you.

In addition to this, you can run the command npm run dev inside of a Nuxt project and it’ll set up the web development server.


Basic Coding Information for Nuxt.js

  • GitHub Stars: +19,000
  • npm weekly downloads: +100,000

Installation

Install it:

$ npm i nuxt

To create a basic app:

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

You can easily start directly with the CLI create-nuxt-app for its latest updates.

In addition to this, you can start it by using one of the starter templates:

  • Express: Nuxt.js + Express
  • Koa: Nuxt.js + Koa
  • Starter: The basic Nuxt.js project template
  • Adonuxt: Nuxt.js + AdonisJs
  • Nuxtent: Nuxt.js + Nuxtent
  • Micro: Nuxt.js + Micro module for content heavy sites

Basic Hello World App

This is one of the most basic examples of a “Hello World!” app on Nuxt.js:


Advantages

  • The main scope of Nuxt.js is UI rendering while abstracting away the server/client distribution.
  • Statically render your Vue.js web apps and get all of the advantages of a universal web app without a server.
  • Setup via the command line with the starter template.
  • Get automatic code-splitting (pre-rendered pages).
  • Get great project structure by default.
  • Get ES6/ES7 compilation without any extra work.
  • Easily set-up transitions between the routes and write single-file components.
  • Get set up with an auto-updating server for easy web app development.
  • Powerful routing system with asynchronous data.
  • Static file serving.
  • Hot module replacement in development.
  • ES6/ES7 transpilation.
  • Pre-processor: Less, Sass, Stylus, etc.

Disadvantages

  • This framework of Vue.js has a smaller community which means fewer resources and potentially less extensive product documentation.
  • Lack of some common solid plugins or components. (Calendar, Google maps, vector maps). Some components also exist, but they are generally not maintained very well.
  • It is crucial to go deep in more complex components or plugins. If you desire to create something quite flexible, you have to get down to render various functions/JSX to do so. (E.g. render the contents of a slot in another place or component.)
  • Props have to be specified in an explicit manner. There might be cases when you want to transform some of the CSS classes to props; you will have to specify all of these props or use $attrs/render functions or JSX.
  • High traffic may put a strain on your server.
  • Reactivity caveats, like setting up an item from the main array directly this.items[key]=value or adding a new data property.
  • You can only manipulate and query the DOM in certain Hooks

Performance

This is a basic Hello World app created in Nuxt. It handles 190.05 requests every second. The average time spent on every request is about 52.619 ms.

On this metric, Nuxt performs the worst when compared to the other frameworks.

Nuxt has the highest score in three of the four measures: accessibility, performance, and SEO.


Community Involvement

  • Number of contributors: 191
  • Closed pull requests: 1,385

There is a GitHub organization where you can easily find projects and modules from the Nuxt community.

In addition to this, there is a curated list of awesome things which are related to Nuxt awesome-nuxt, including tools, modules, showcase, mention of Nuxt.js, tutorials, books, blogs, starter template, projects, and official examples using Nuxt.

The community communicates through Telegram, Gitter Chat Room, Russian community, Twitter, Discord, and YouTube channel.


Let’s Wrap Up

So, now you are well aware of various advantages of Nuxt.js as a preferred Vue.js framework.

No doubt, Nuxt makes it quite easy to create a single-page web app. There are many web development companies that provide development solutions based on Nuxt.

If you want to have your own web applications, you can hire web developers from these companies. When you hire a website developer, make sure they are well-aware of all the details of Vue.js and Nuxt.js.

Better Programming

Advice for programmers.

Matt Fitzgerald

Written by

Working in xicom.ae | Business Analyst (12+ years) | Technical Writer | Tech Geeks | Tech Enthusiast

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade