how to make a blog in nuxt js quickly

For a video tutorial watch this ☝🏿

First open your Nuxt project and install this

if you have Nuxt old version (version 2) install this:

yarn add @nuxt/content@^1

For new version, install this:
yarn add @nuxt/content

And in your nuxt.config.js
add this module

  modules: ["@nuxt/content"],

Now make a file content\articles\First-post.md

and write

---
author:
  name: Abhishek
  bio: Subscribe for more such content
  image: none

title: "this is title"
img: https://images.unsplash.com/photo-1600132806608-231446b2e7af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80
description: "This is desc!"
---

# title is hello world

Now make a file pages\blog\index.vue

and write this inside of index.vue

<template>
  <div
    class="max-w-3xl max-w-5xlmin-h-screen flex justify-center mx-auto my-12"
  >
    <main class="w-full mx-4">
      <h1
        class="text-3xl font-thin mb-6 mx-4 uppercase border-b-4 border-indigo-400"
      >
        My BLOG
      </h1>
      <section class="space-y-4 divide-y">
        <article v-for="post of posts" :key="post.slug" class="pt-4">
          <h2 class="text-lg mb-2 text-blue-700 hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
          </h2>
          <img :src="post.img" />
          <!-- <img src="{{ post.img }}" /> -->

          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    };
  },
  async fetch() {
    this.posts = await this.$content("articles").fetch();
    console.log(this.posts, "post");
  },
};
</script>

Now make a file pages\blog\_slug.vue

and write this inside of _slug.vue

<template>
  <div class="max-w-3xl mx-4 md:mx-auto min-h-screen my-12">
    <div v-if="post">
      <h1 class="text-2xl font-semibold mb-6">{{ post.title }}</h1>
      <nuxt-content :document="post" />
      <div class="mt-8">
        <nuxt-link to="/blog" class="hover:underline">Back to blog</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
    };
  },
  async fetch() {
    this.post = (
      await this.$content("articles")
        .where({ slug: this.$route.params.slug })
        .limit(1)
        .fetch()
    )?.[0];
  },
  head() {
    return {
      title: this.post?.title,
      // meta: [{ name: "description", content: this.post?.description }],
      meta: [
        {
          hid: "description",
          name: this.post?.title,
          content: this.post?.description,
        },
      ],
    };
  },
};
</script>

<style>
h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}
a {
  color: blueviolet;
}
</style>

Now go to your localhost:3000/blog
you should see something like this