Nuxt Content v3

型付きコレクションと SQL バックアップクエリを備えたコンテンツ駆動型 Nuxt アプリケーションの段階的なガイダンス。

使用する場合

以下の作業をしている場合：

• コンテンツコレクション (content.config.ts, defineCollection)
• リモートソース (GitHub リポジトリ、defineCollectionSource 経由の外部 API)
• コンテンツクエリ (queryCollection, ナビゲーション、検索)
• MDC レンダリング (<ContentRenderer>, prose コンポーネント)
• データベース設定 (SQLite、PostgreSQL、D1、LibSQL)
• コンテンツフック (content:file:beforeParse, content:file:afterParse)
• i18n マルチ言語コンテンツ
• NuxtStudio またはプレビューモード
• LLMs インテグレーション (nuxt-llms)

ドキュメント作成の場合： document-writer スキルを使用 Nuxt の基礎の場合： nuxt スキルを使用 NuxtHub デプロイメントの場合： nuxthub スキルを使用 (NuxtHub v1 対応)

利用可能なガイダンス

現在の作業に基づいて特定のファイルを読む：

• references/collections.md - defineCollection、スキーマ、ソース、content.config.ts
• references/querying.md - queryCollection、ナビゲーション、検索、周辺情報
• references/rendering.md - ContentRenderer、MDC 構文、prose コンポーネント、Shiki
• references/config.md - データベース設定、markdown プラグイン、レンダラーオプション
• references/studio.md - NuxtStudio インテグレーション、プレビューモード、ライブ編集

ファイルの読み込み

タスクに基づいて以下の参照ファイルを読み込むことを検討してください：

• references/collections.md - コレクション、スキーマ、または content.config.ts を設定する場合
• references/querying.md - queryCollection、ナビゲーション、または検索を使用する場合
• references/rendering.md - markdown/MDC をレンダリングするか、ContentRenderer で作業する場合
• references/config.md - データベース、markdown プラグイン、またはレンダラーオプションを設定する場合
• references/studio.md - NuxtStudio を統合するか、プレビューモードを使用する場合

すべてのファイルを一度に読み込まないでください。 現在のタスクに関連するものだけを読み込んでください。

主要概念

概念	目的
Collections	スキーマ付きの型付きコンテンツグループ
Page vs Data	page = ルート + 本文、data = 構造化データのみ
Remote sources	GitHub 用の source.repository、API 用の defineCollectionSource
queryCollection	コンテンツ用の SQL ライク fluent API
MDC	markdown 内の Vue コンポーネント
ContentRenderer	解析された markdown 本文をレンダリング

クイックスタート

// content.config.ts
import { defineCollection, defineContentConfig, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/**',
      schema: z.object({
        title: z.string(),
        date: z.date(),
      }),
    }),
  },
})

<!-- pages/blog/[...slug].vue -->
<script setup lang="ts">
const { data: page } = await useAsyncData(
  () => queryCollection('blog').path(useRoute().path).first()
)
</script>

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

セットアップの確認： npx nuxi typecheck を実行してコレクション型が解決されることを確認します。queryCollection が空を返す場合は、コンテンツファイルが source glob に一致するパスに存在することを確認してください。

ディレクトリ構造

project/
├── content/                    # コンテンツファイル
│   ├── blog/                   # 'blog' コレクションにマッピング
│   └── .navigation.yml         # ナビゲーションメタデータ
├── components/content/         # MDC コンポーネント
└── content.config.ts           # コレクション定義

公式ドキュメント

• Nuxt Content: https://content.nuxt.com
• MDC 構文: https://content.nuxt.com/docs/files/markdown#mdc-syntax
• Collections: https://content.nuxt.com/docs/collections/collections

トークン効率

メインスキル: ~300 トークン。各サブファイル: ~800-1200 トークン。現在のタスクに関連するファイルのみを読み込んでください。