Understanding @nuxt/content in One Page (with Samples)

What is @nuxt/content?

It is a module for managing content in Nuxt.

By placing markdown files inside /content, you can retrieve and display them within Vue components.

I think it is well-suited for blogs and documentation pages.

It supports the following file formats:

• JSON
• YAML
• XML
• CSV
• Markdown

It seems it supports more than just markdown.

Advantages of @nuxt/content

The advantages are introduced on the official page, but they are mainly:

• You can use Vue components within Markdown
• Full-text search
• SSG support (nuxt generate)
• Code block syntax highlighting (PrismJS)
• Ability to generate a table of contents

These are some of the benefits.

Introduction

Installation

Install @nuxt/content.

npm install @nuxt/content

nuxt.config.js

Edit nuxt.config.js.

{
  modules: [
    '@nuxt/content'
  ],
  content: {
    // Options
  }
}

Usage

Content Management (Markdown)

I will introduce how to manage content with Markdown.

1. Create a /content directory directly under the project root
2. Create .md files inside /content
3. Add front-matter inside the .md files
4. Write the content below the front-matter

You write it like this.

The part enclosed in --- is the front-matter.

---
title: July 2021 Site Operations Report
description: A reflection on July 2021.
slug: 202107
published_at: 2021-08-01
updated: 
img: first-blog-post.jpg
alt: my first blog post
---
## Reflection
Since creating this site at the beginning of July, I haven't been able to do any updates at all.
However, I was able to read some books that could serve as content for the site and summarize them into notes, which was good.

Also, I was able to create a vscode development environment using Docker containers, which I had wanted to do for a long time.

Data Fetching

Once you have created content files, you can fetch them within your Vue components.

Code to display a list of articles:

<template>
  <div>
    <h1>Article List</h1>
    <ul>
      <li v-for="article of articles" :key="article.slug">
        <NuxtLink :to="'post' + article.path">
          <div>
            <h2>{{ article.title }}</h2>
          </div>
        </NuxtLink>
        <p>{{ article.created }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const articles = await $content()
      .only(['title', 'slug', 'path', 'created'])
      .sortBy('created', 'desc')
      .fetch()
    return {
      articles
    }
  }
}
</script>

Code to display content:

<template>
  <article>
    <div v-if="document.image">
      <v-img
        :src="`/cover-image/${document.image}`"
      />
    </div>
    <div v-if="document.created || document.updated">
      <div v-if="document.created">
        Published: {{ document.created }}
      </div>
      <div v-if="document.updated">
        Updated: {{ document.updated }}
      </div>
    </div>
    <div>
      <h1>{{ document.title }}</h1>
    </div>
    <nuxt-content
      :document="document"
    />
  </article>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const documents = await $content().where({ slug: params.slug }).fetch()
    const document = documents[0]
    return {
      document
    }
  }
}
</script>

Various Other Topics

@nuxt/content-theme-docs

@nuxt/content-theme-docs is a template that allows you to easily create a documentation site using @nuxt/content.

You can create a site like this in a few seconds.

npx create-nuxt-content-docs <project-name>

It is designed more for technical documentation, but it is really easy to get started.

Official Tutorial for Creating a Blog

For those who want to create a blog instead of technical documentation, this page is the official Nuxt tutorial.

Although the page is in English, it is highly recommended as it introduces demo pages and source code.

Create a Blog with Nuxt Content

Final Thoughts

The official documentation is also very easy to understand.

I recommend it because managing articles with Markdown is convenient.

I have summarized the knowledge I gained from two and a half years of daily development at home! Please take a look if you'd like.

https://doityourself.jp/articles/2026/full-platform-development/