Getting started with NuxtJS: A Vue beginner — Part 1

A beginner with VueJS for web application development, but I have been working with React for over a year now and had started to feel comfortable and confident both with ReactJS. Confident enough to assure that I could face any sort of problem given I had to use React to do it. Then I was introduced to this amazing new framework during my internship, VueJS. Did some courses, copied and tried to understand what the instructor was doing. Simple enough the things were easy. I don’t know if it was because of the fact that I was comfortable with React or Vue is easier to learn and understand itself. But learning to create simple web application using Vue was easier than learning React.

I might be biased but in my opinion and experience, I found that the limitations and things that were hard to implement with React was made easy with Vue. One of the many things made easier would be the two way binding of variables. (But we’ll get into that in some other day). Let’s start with the thing that the title is based on.

Before jumping directly into the Nuxt environment, one has to learn a bit of Vue. I would recommend any good video tutorials for this. One of the good ones would be this one here. Let’s answer the first question.

1. What is NuxtJS?
   NuxtJS is framework built on top of VueJS to make your life easier.
   That might not be the exact definition but it is what I would like to say. You can learn more about what Nuxt provides in terms of functionalities at their official website.
2. Why NuxtJS and not plain VueJS?
   Like I already said, it is just there to make your life easier. We can complete projects entirely without using the Nuxt, build our own Vue project, integrate the libraries, manage proper layout, folder structuring, state management and all but why bother when Nuxt does just that when you create a project with it.

Creating a simple project

The steps I followed have been clearly explained in the documentation. The command is this:

Creating your first Nuxt app.

The folder structure that it will create can be seen as below:

Folder structure for starter Nuxt App

Getting through them one by one:

1. Assets
   This folder is for un-compiled files like images, font files, styles (CSS, SASS, etc).
2. Components
   This is where we store all the reusable components that we will need when we start building the project.
3. Layout
   The layout folder will contain the main layout Vue file that will define the layout of the entire project. We can create other layout in the folder to differentiate between users or in case we can to have different variants of layouts.
4. Middleware
   Middleware are the functions that come before the final execution. This folder will contain any middleware plugins that might be need in the project. The most widely used is the authentication middleware.
5. Pages
   This might be the most used and important among the bunch. The components/files created in this folder will be turned into routes by Nuxt which can be routed from the browser. It serves as both views and router folder at the same time.
6. Plugins
   This is where the files that we want ro run before mounting the root are stored. For example, use of various UI libraries.
7. nuxt.config.js
   This file is used for setting the configurations of the project. Though it is prepopulated based on basic configuration, we can change it to our liking. You can learn more about what you can customize in the documentation.

Now that we have a basic Nuxt app setup, in the next part, I will be discussing about the routing that is done by Nuxt (the one from the pages folder), state management with vuex and getting started with a basic application.