Getting started with NuxtJS - Part 1

I have been using vue.js with quite long already. Vue 3 came out a few months ago, it introduced composition API and a few new changes. I have always been a fan of vue because it's quite simple to start with and its very very flexible. However, when building a page one thing we need to take care is SEO. Using plain vue and virtual DOM doesn't render our html code so scrapers cant get to know which webpage are they visiting nor what is the page about. This basically means google or other searchers will never put you on their page.

Confident enough to assure that I could face this problem i found Nuxt.js.

Before jumping directly into the Nuxt env, i will answer some questions.

1. What is Nuxt?
   Nuxt is a framework built on top of Vue. It provices SSR which is the process where server sends data directly to the browser to draw layout. Browser doesn't need to call any api to fetch data from any source and manipulate the DOM. This just simple means that you now can use Vue and have html code rendered for any website the user visites. This is key for SEO.

2. Why Vue and not React?
   This is just someone's opinion. I find vue easier to start with than react. However, from my point of view both provide what you need when developing a new website.

Getting started creating a new project using NuxtJS

The steps I follow can be alterned between other ones. There are multiple cli scripts in orther to get a scaffold of your project

npm create nuxt-app <your-project-name>

This will create a new project as seen below:

In this case i used Vuesax as my primary ui dev env.

Getting through each folder:

1. Assets
   This folder is for images, fonts, styles, etc..
2. Components
   This folder is for storing your reusable components in the project.
3. Layouts
   This folder is for creating your templates or scaffolds of your project.
4. Middleware
   Functions you will call before something ends. This can be useful for example for an auth form.
5. Pages
   This is the view folder in plain vue. This folder is very important as this files will normally call the components you created before and they will be displayed inside your layouts.
6. Plugins
   Js files where you can store plugins just like vuetify, or any other ui dev environment. (UI libraries)
7. Static
   Static files they will remain the same when you build your project
8. Store
   Vuex Store in order to properly and efficiently manage your reactive props and properties.

Now that we have learned some basic Nuxt app setup, i will be explaining more in depth how route works in nuxt, how state management in store vuex and we will get started with a basic app.

Thanks for reading :)