Nuxt is the most loved Vue framework. If you ask me to say the ten best things that I love about Nuxt then it might be difficult to pick the best ten! Nuxt is much more beautiful than any other frameworks that I have worked on and it's a 10/10 project.

Let's see why you should consider Nuxt for the next project, and of course why VueJS should be your go-to framework. Before we start, if you are new to Vue, then don't start Nuxt. Start a plain Vue project because that helps you to understand many core features of the framework. Not knowing the bests of Vue is something that you don't want to miss and once you feel comfortable with Vue, then jump to Nuxt.

So, Why Nuxt?
1. It's structured.
Nuxt is well structured. The project defines a clear idea of the structure of the project. It says where each file should be and how those files should be included in the project. This makes it so easy to manage projects that have many developers working on. Because everyone knows where each file is why it is there. Every file in the nuxt director has a reason for it. I had also come across situations where I need to pick a project that was partially done by a different developer and assigned me to complete the same. It took no time to understand the whole project and get going.

2. There is a module for it.
You don't need to reinvent the wheel every time. Whatever might be your concerns there is definitely going to have a module for it. Whether it is Google Analytics, Site map generation, or you want to convert your super project to a PWA, whatever, there are well-documented modules readily available in Nuxt. Look for modules here.

3. Choices
Nuxt gives many choices out of the box. You can develop a Single Page Application, Progressive Web App, you get full Server-Side Rendering, or you can even build a static site. And all these options are just like a button on the TV remote. Super easy. So, you built a static site and now your business has grown, and want a Single Page Application instead, well you do that just by adding mode: 'spa' onto the nuxt-config.js file

4. Routing
Routes are built by the nuxt automatically by looking at the directory structure. This removes a huge headache managing a separate route file like we used to do in a Vue application. Apart from page routes, nuxt also creates dynamic routes. For eg: any file that has a name starting with '_ ' will be considered as a dynamic route and the Nuxt parses the URL to the route params. You can imagine how it would have been taken to implement such a function if we are building an app without Nuxt.

In the below picture I got three first-level routes

/ or the index page
/blog
/admin (This will be a protected route. Check out middleware for more details on that)

Inside the blog folder, we have an index.vue page. Whenever a user hits the address http://elifent.tech/blog then the index.vue page will be loaded. This page will be having a query to list all the blogs are on my website. When the user hits http://elifent.tech/blog/how-to-print-hello-world then the page _url.vue will be loaded and on this page, nuxt gives us direct access to the blog title which is retrieved through the URL. Hence when I print {{ params.url }} any in the same vue page then I will be getting `how-to-print-hello-world`. About the admin page, we can protection to all the pages that are inside the admin folder using middleware.

5. Layouts
Layouts are where you store the different layouts for your application. For eg: Suppose that you have a home page, a blog page, and a store page. And you need a different layout for these three pages. On the home page, you will be mostly have a header bar, some sliding pictures, and then div's to display the latest news, blogs, and some of the products in your store. The blog page will display the blog, and also on the right side of the blog article, it gives suggestions to the next blogs. In the store, you need to show all the products that you are offering, so it might be mainly a list. These three pages are on a different layout. To make it easy you just need to add three layouts onto the layout folder and then simply ask the .vue files inside the pages folder to use the layout. Once you make changes to the layouts then the same will be migrated to all the pages that are using it.

5. Middlewares
Middlewares are the functions that run before rendering a page. You can either add middleware either to a single page, a group of pages or to the whole project. For eg: If you are building an application that needs the user to be logged in before accessing the pages then you can add auth middleware at the whole application level. Middleware makes it so easy to control the access levels or populate Vue store some data before the page is being shown to the user.

6. Vue Store
Nuxt automatically manages the Vue store. It all starts by creating a .js file inside the store folder and then Nuxt adds the same to the Vue store and starts listening to the mutations and commits. My favorite part is using a snackbar.js file in the store and then using a global snack bar for the entire project. You can then send a snack from anywhere in the application and the code just catches it. Will talk about it in another blog.

7. Asset and Static
Assets are those files that need to be processed by the Nuxt loader, an example will be CSS and SASS files. You can add all such files to the asset folder. But you also need to add these files onto nuxt-config.js files so that these get processed in the build. How to do that? Add the file path to the global CSS array.

8. Server
So far we have been talking about the front end side of the app, but we also need the back end. All the server-side codes go inside the server folder. You can use any server-side framework. During the earlier version of Nuxt they used to specifically ask which server-side framework do we want to use and then the CLI itself was used to build and configure the same for us. But in the new version, we need to configure ourselves. I am not sure, but this could be because Nuxt is now supporting frameworks in other languages as well (eg: Laravel for the backend) and they have stopped building server folders with the CLI. But, the setup is very easy.