Nuxt.js over Vue.js

Nuxt.js example – why does the Vue needs a framework?

Nuxt.js, being one of the technologies that will improve your Vue applications. If you are proficient with it, you will benefit a lot.  So in this article we will try to cover the biggest questions of Nuxt.js To be more specific, questions that a person hearing about Nuxt.js for the first time, has. Let’s analyse the Nuxt.js example.

What is NuxtJS? It is a framework that is built on top of Vue. It’s worth mentioning that it is not something new, it is still a frontend framework, same as Vue. However, there are some significant differences so it is not the same as Vue.js. Nuxt lets you developing web applications with the libraries of Vue (vuex and others).

It might sound ridiculous that the Vue.js, a framework itself, has a framework built on it. Natural question is why does the Vue needs Nuxt.js? And as it is true about any other JavaScript technology, a framework solves a specific problem or is superior in one or another way. Nuxt.js is no exception. Keep reading to find out more about the Nuxt.js.

Nuxt.js is based on Vue.js and Vue is based on JavaScript

What are the advantages of Nuxt.js?

There more than one advantage why Nuxt.js is a perfect fit for your next app. Here are some of the pros of using Nuxt, a Vue.js framework:

  • One of the biggest advantages is that the Nuxt provides better SEO results. You can make a SEO optimized website with Nuxt.js and this is a huge advantage. Even though Google robots were misunderstanding websites that are heavy in JavaScript back in the days, nowadays the algorithms can interpret it pretty easily. However, you can achieve amazing things with server-side rendering, instead of having a traditional SPA. Google algorithms will crawl the content more easily, so this will result in better SEO results.
  • Performance. Server side rendering not only provides better SEO, it also increases the performance of the app.
  • A very flexible and progressive framework that allows you to create different types of applications. It allows you to develop CMS or PWAs, you can use different types of rendering. There are many possibilities there.
  • Nuxt.js provides a project structure. So you don’t need to think how you should organize your files, you can use the template that is there already.

When you should use Nuxt.js instead of Vue.js?

Let’s not forget the fact that Nuxt is still a Vue. However, it improves application in other ways than pure Vue.js. Now the answer if you should use Nuxt.js instead Vue.js is completely up to you. Some questions you should answer yourself:

  • Do you care about SEO, or it will be an internal app that won’t face the public? If you do, then you should Nuxt.js
  • Are you building a small hobby application or you are building something to yours portfolio? In this case, choose vanilla Vue.js.
  • You are not worried of how your application is rendered and SSR is not a need for you. You should choose vanilla Vue.

What are the disadvantages of Nuxt.js?

Unfortunately, there is no perfect technology. And in case there was one, probably there won’t be so many different programming languages and frameworks as the one solution will do the work.  So, let’s talk what are the disadvantages of using Nuxt.js:

  • You have to use Node.js server for the backend part. As the one of the technologies Nuxt is based on, is Node.js, most of the time you will have to use Node. Even though this can be bypassed, but as the Nuxt requires using Node, you will still have to use.
  • Another technology you need to learn. Even though it is based on Vue, it is still another framework. Even if the learning curve is not that steep, it still does exist.

Let’s go to the Nuxt.js example. Let’s see how to install Nuxt.js

In order to make a new Nuxt.js project, we will have to use npx. If you are not familiar what is the npx, it is a npm tool (with the newer npm versions you have it by default). Npx lets you executing npm package binaries. But let’s not dive deeper into the details of npx. Back to the Nuxt.js example, let’s execute this command to scaffold a new project:

npx create-nuxt-app

After this, you will be asked some questions. Firstly, you will have to set a name for the project.

Create a new Nuxt.js project

As you might see, I gave my project a name of new-one. How original. Anyway, you will get some more questions regards the configuration. In case you want to choose a UI framework or a server side framework, you could do so. For this tutorial, let’s leave all the settings default, except package manager. Choose npm as package manager of your project.

Choose npm as package manager

An important note: you will get asked to choose the package manager. The default value is yarn. Make sure you have the yarn installed or else you will get an error. If you don‘t have and don‘t want to install yarn, select npm as the package manager.

After a successful installation, you should get your new project running at http://localhost:3000.

Newly created Nuxt.js example project

Nuxt.js example project structure

If you were moving along the example of this post, you should get a Nuxt project created that has a structure like this:

Nuxt.js project structure

As you might see, there are more folders than it is if creating a project with Vue CLI. There are a few directories: assets, components, layouts, middleware, node_modules, pages, plugins, static, store. We will review what each of them is responsible for:

  • Assets directory holds all the uncompiled LESS, SASS and JavaScript files. For now, as you just created a project, it is empty. But if you will have any uncompiled files in the future, this is the directory you should put the files in (if you want to stay organised). But if you don’t need the directory, you are free to delete it.
  • Components – just like in the Vue application, components directory is for storing the Vue.js components.
  • Layouts – directory that will hold layouts of Nuxt app. Layouts are for making the UI of application. So there you can hold many different layouts (you aren’t obliged to use them all). But anytime you want to customize your UI, layouts folder is the way you should be heading to.
  • Middleware – a folder that holds the middleware you made. If you are not familiar with the term middleware yet, it is basically something that is acts as a wall when accessing a specific functionality. You can create a middleware that checks if the user is authenticated.
  • Node_modules – a folder that holds all the npm installed modules.
  • Pages – a folder for holding the views and routes of your project. What the directory has is the .vue files. You can’t rename this directory without changing the configs, as it just won’t work.
  • Plugins – plugins is a directory that can hold any JS plugin you want to use before spinning up the Vue. This is the place where component could be registered.
  • Static – in the folder you can find files that are static and will not change in the near future. These files could be robots.txt, sitemap.xml or favicon, or just any other static assets.
  • Store – directory is responsible for storing Vuex files. If you will be using Vuex (and you probably will), this is the place where the store files should be saved. In order to enable the store you should have index.js file.

How is the Nuxt.js is better for SEO?

Building an app with pure Vue.js is not the same as building with Nuxt.js, if we are talking about the SEO performance. Previously I’ve mentioned that one of the big Nuxt advantages is that it improves SEO. So, if you are building an app that will be accessible from the public, this might be important for you. Let’s talk how Nuxt has it differently than Vue.js.

Instead of rendering the page after the DOM has loaded, Nuxt.js user SSR – server side rendering. How does that work? Well, Nuxt.js uses Node.js server to render the Vue.js components that were fetched by AJAX previously. Instead of rendering everything after the DOM is loaded, Node renders everything on the backend and returns a page after the asynchronous operations are done. In this way, Google robot will parse the page faster. And this will result in the better SEO performance, which might be, or might not be important in your case.

Leave a Comment

Your email address will not be published. Required fields are marked *