Vue JS is a framework that is growing more and more. In this article, we will talk about a tool that can help us further evolve our applications in Vue. We are talking about Nuxt JS. But what is Nuxt? What are the advantages of using it? How can it help us? We will answer these questions in this article, in addition to creating our first project with Nuxt.
What is Nuxt JS?
The Nuxt JS is a JavaScript framework created by Sebastien Chopin and Alexander Chopin in 2016. It is maintained by the community, just like Vue JS. Note that it is a framework developed for another framework. Why is this necessary?
Why is Nuxt necessary?
A Vue application by itself is already very powerful. However, when we work on a very large application, we may encounter some difficulties. For example, we may find it challenging to maintain productivity while creating the pages of our site.
Moreover, a Vue application is by default a SPA (Single Page Application). This is good due to its simplicity. However, this approach can bring us some problems depending on the application we are developing.
The concept of a SPA is to have only one HTML file, and as we interact with the page, we change its content. In the case of Vue, we change the components that are rendered. But this concept can impact some important aspects for our project to function well. One issue is speed. Since all rendering is done on the client side (browser), all requests for CSS and JavaScript files are made before our site is actually available to the end user. This process can be somewhat slow, causing our site to lose performance. This can harm the ranking of our project in browser search engines. For example, Google recommends that our site loads in up to 3 seconds to have a good position in search ranking.
And since we are talking about search engines, we cannot help but mention SEO (Search Engine Optimization). This set of strategies helps our site to be well regarded by search engines. And this is another issue that SPAs can harm us. By performing rendering completely on the client side, we cannot index our page through meta tags, for example. In other words, search engines cannot identify the purpose of our pages and their contents. Thus, they will not be recommended to users.
These issues can hurt us. The good news is that Nuxt can help us solve these "problems." This framework uses the concept of SSR (Server-Side Rendering). This approach defines that all rendering of our site will occur on the server side. This means that our HTML, including meta tags, our CSS, and our JavaScript will be assembled on the server. Thus, when the browser requests a page from our site, all the necessary content will already be ready and sent to the user at once. The result will be that our site will increase in speed and be SEO-friendly, which will facilitate its recommendation in browser search engines, exactly what we need.
Other advantages of Nuxt
Besides the advantages we just mentioned, Nuxt can also help us with other very important issues. Think, for example, about the various tools we have when working with a Vue application. We have, for instance, the Vue Router to create the routes of our site and Vuex for state management in the application. We even talk about each of these tools in detail in our Complete Course on Vue JS.
These features are very useful. However, imagine needing to configure each of them in a project we are starting. This can require a considerable amount of time. In this regard, Nuxt can also assist us. It does all this configuration for us automatically, as it utilizes Vue Router and Vuex in its structure, as well as vue-meta for SEO, as we mentioned earlier. Thus, we only need to focus on developing our files in Vue, increasing our development performance.
The Nuxt community is very active and the documentation for this framework is excellent! So if we have any doubts or problems, we will not have difficulties in finding the necessary help. The simple process of starting a project in Nuxt is very straightforward. Let’s see how to do that now.
Creating the first project in Nuxt
To start a project using Nuxt, it is necessary to have Node installed on our computer. Additionally, it is important that npm or Yarn are also installed. To create our first project, we will use the following command:
npx create-nuxt-app first-project
We named our project “first-project,” but we could specify any other name.
After executing this command, we will be asked a series of questions for the configuration of the project.
The first question is about the name of the project. We will define what has already been entered before. So, we will press Enter.
We will now choose the programming language we will use in the project. We can change the chosen option using the arrow keys. We will choose “JavaScript.”
Next, we will define the Package Manager that will be used to download the modules in our application. We will choose npm.
The next step will be to define whether we will use any framework for a better user experience, such as Bootstrap or Vuetify. In this initial project, we will not use any, so just press Enter.
Nuxt JS has some modules that can help us in our project, such as an Axios module used for AJAX requests, and a PWA module to convert our application into a Progressive Web App. If we want to choose any options, just press Space. We will not use any modules, so we will press Enter again.
We can also define if we will use any tool for code analysis in our project, such as ESLint. We will press Enter once more.
If we wish to use any testing framework in our project, such as Jest, we can define it at this time. In our case, we will press Enter.
The next step is to define the type of rendering we will use in our project. We can choose “Universal,” which represents SSR, or “Single Page App,” which is a SPA. Note that even though Nuxt helps us solve the problems of a SPA in Vue JS, it is also possible to create a SPA with Nuxt. In this case, we will choose the “Universal” mode.
The next configuration is the type of deployment we will perform. We have the option to create a server in Node JS or to deploy the project statically, without a server. In our case, we will choose the first option, “Server.”
Finally, we will choose the development tools we want. The jsconfig.json file is recommended if we are working with Visual Studio Code. If desired, you may select it using the Space key.
Just a reminder that these configurations may change over time, depending on the version of Nuxt that we are using. After this, the creation and configuration of the project will begin.
At the end of the installation, a success message will be returned:
To start our project, we will execute the following commands:
cd first-project
npm run dev
With this command, Nuxt will start our development server:
Generally, Nuxt is available on port 3000. Thus, by accessing http://localhost:3000 in the browser, we will see the following result:
Notice that our project is already being recognized in the browser. Now, let’s analyze the folder structure that Nuxt provides us:
At this moment, we can see another issue where Nuxt helps us. A common question we have when working with Vue JS is where to create our files. Vue does not have a rule on where to define each file; this is often left to the developer's discretion. However, we may want to follow a folder pattern (especially if we are indecisive when choosing folder names ?). In this regard, Nuxt also helps us, as it provides a folder structure that we can follow.
We see many folders in this structure and we may feel a bit lost with them. The good news is that each of those directories has a README.md file that shows the purpose of the directory. Thus, if we have any doubts, we can resolve them by reading this file.
We can say that the most important directories to start a new project are the pages and components folders. The components folder stores the components of our application. Thus, if you already have some knowledge about this Vue JS concept, you will not have difficulties in manipulating this folder.
The pages directory stores all the pages of our project. We can say that this is where we will group the various components we create and also define the meta tags for each page. The most amazing thing is that Nuxt converts each file in this directory into a route of our application. Thus, the routes are created automatically; we do not need to worry about that. Let’s see this happening in practice.
Creating a route in our application
Let's create an about.vue file in the pages directory. It will have the following content:
<template>
<h1>Meet Hcode Training</h1>
</template>
Now, when we access http://localhost:3000/about, we see the following:
Excellent! The route “/about” was created dynamically and our HTML was rendered correctly. Impressive simplicity of Nuxt, isn't it?
Just repeat this process to create any other route in our project!
Conclusion
In this article, we saw an introduction to Nuxt JS, the intuitive framework for Vue JS. We hope this framework can help you do what Gregg Pollack said in the introductory video on the Nuxt site: “Spend less time on configuration and more time on what really matters: solving problems and creating amazing applications with Vue JS.”
See you in the next article :)