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)