Build a Blog in x mins using Nuxt Content
Introduction
Nuxt.js is a framework for building Vue.js apps, Nuxt basically gives you everything out of the box that Vue does not. Features such as faster page loads, SEO Optimisation, Standardised folder structure, Modular architecture, etc.
You can find a plugin for almost anything you want to add in your site. You can convert your application into a PWA in just 1 line of code.
In addition to that, Nuxt provides you with the feature to make your site completely static meaning you can prerender all the HTML, CSS and JS files required to run your site/application. And nuxt has relatively fasted build time compared to Angular or React and has a pretty smooth learning curve.
Installation
Nuxt provides a simple npx module to create the initial folder structure. Just write the following on a terminal or command prompt
npx create-nuxt-app MyBlog
Here "MyBlog" is the name of our blog that we are going to build. Feel free to be creative and name something amazing for your blog.
This step will ask you questions such as Project Name, If you will be using Javascript or Typescript (I am going to use Javascript), Will you use NPM or Yarn to install dependencies (I'll use NPM), What CSS framework you will be using (I'm going to import Bootstrap using CDN because that's easier for me, so I selected None)
After selecting the UI (CSS) Framework, it will ask you which Plugins to include. I'm going to include Content only for now and manually add rest of the plugins as I require to complete the project.
Then it will ask you to select the Linting Tool, It's always ESLint for me. After that, the setup will ask you to set up a testing framework. Since this is not a huge project, I wouldn't recommend that. So I'll select None.
Is your page is a Single Page App (SPA) or will it contain routing? We are building a blog so obviously there will be routing. So, go ahead and select Universal
Next question is very crucial, In this post, we will be building a completely static website. Therefore you will select Static in this stage.
Next is Development tools, don't worry about this, and select jsconfig.json, Then I will ask if you have a git version control system (In my case, I have a git where you can find all the code to this project) But you can select None if you want.
Once this step is completed, change directory into that folder. In my case, it's MyBlog
cd MyBlog
At this stage, you have created a nuxt.js application. You can see this by writing the following code in your terminal.
npm run dev
Usually, it will run your website on [localhost port 3000](http://localhost:3000 "Localhost 3000"). You can see that in your terminal.
This is just the beginning, we will create a functioning blog from here.
Folder Structure
When you open the newly created folder in your text editor, you'll see something like this. Most of these folders are not that important for this project. Let me explain the ones that you'll use.
- Assets: This folder will
