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
Top comments (0)