Nuxt Content はプロジェクト内の content/ ディレクトリ を読み取り、.md、.yml、.csv、.json ファイルを解析して、アプリケーションのためのファイルベースのCMSを作成します。

• 組み込みコンポーネントでコンテンツをレンダリングします。
• MongoDBのようなAPIでコンテンツをクエリします。
• MDC構文を使用してMarkdownファイル内でVueコンポーネントを使用します。
• ナビゲーションを自動生成します。

Nuxt Contentを有効にする

プロジェクトに @nuxt/content モジュールをインストールし、nuxt.config.ts に追加します。以下のコマンドを使用してください：

npx nuxt module add content

コンテンツを作成する

Markdownファイルを content/ ディレクトリ内に配置します：

# Hello Content

モジュールはそれらを自動的に読み込み、解析します。

コンテンツをレンダリングする

コンテンツページをレンダリングするには、<ContentRenderer> コンポーネントを使用してキャッチオールルートを追加します：

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer v-if="page" :value="page" />

    <footer><!-- ... --></footer>
  </div>
</template>

ドキュメント