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 analyze 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. The natural question is why does the Vue need 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.
What are the advantages of Nuxt.js?
Build highly engaging Vue JS apps with Nuxt. js. Nuxt adds easy server-side-rendering and a folder-based config approach. Check out this course on Udemy:
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 Nuxt provides better SEO results. You can make an 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, but 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 about 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 your portfolio? In this case, choose vanilla Vue.js.
- You are not worried about how your application is rendered and SSR is not a need for you. You should choose a 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 about what are the disadvantages of using Nuxt.js:
- You have to use the Node.js server for the backend part. As 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 it.
- 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 with what is the npx, it is an 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.
As you might see, I gave my project the 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 the package manager of your project.
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.
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:
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 organized). But if you don’t need the directory, you are free to delete it.
- Components – just like in the Vue application, the components directory is for storing the Vue.js components.
- Layouts – directory that will hold layouts of the Nuxt app. Layouts are for making the UI of the 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, the 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 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 are 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 components 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 an 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 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 about 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 a 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 better SEO performance, which might be, or might not be important in your case.