Getting Started with Nuxt 3 Content Module

The Nuxt 3 Content module lets you manage and render static or dynamic content in your Nuxt apps. It's perfect for blogs, documentation sites, portfolios, and product catalogs.

Installation

yarn add --dev @nuxt/content

Configuration

Add to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
})

Create Content Files

Create a content/blog/ directory and add Markdown files (e.g., my-first-post.md).

List All Blog Posts (index.vue)

<template>
  <div>
    <ContentList path="/blog" v-slot="{ list }">
      <div v-for="post in list" :key="post._path">
        <p>{{ post.title }}</p>
        <NuxtLink :to="post._path">Read more</NuxtLink>
      </div>
    </ContentList>
  </div>
</template>

Render Individual Posts (...slug.vue)

<template>
  <ContentRenderer v-if="data" :value="data" />
</template>

<script setup>
const { path } = useRoute()
const { data } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).findOne()
})
</script>

Use Cases

Blogging platform
Documentation website
E-commerce product catalog
Portfolio or personal website
News or magazine site

By following these steps, you can effectively use the Nuxt 3 Content module to create dynamic, content-driven websites.