nuxt-content

Nuxt Content

ワークフロー

1. インストールされている @nuxt/content のバージョン、content.config.ts、content/ 配下の該当ファイル、それらを利用する Nuxt の領域を確認します。コレクション、ソースの glob、スキーマ、利用側が一致していれば、該当ブランチを把握できています。
2. 以下のガイドから最も関連性の高いものを開きます。Nuxt Content のガイダンスはコンテンツが所有する API にのみ適用し、残りの領域を所有するパッケージに応じて Nuxt、Nuxt Studio、Nuxt UI、または Vue のガイダンスを使用します。
3. 型付きコレクションとペイロードを利用した Nuxt のデータ読み込みで実装します。コレクションの型が解決され、意図したクエリが期待するドキュメントの形を返し、対象のレンダリングモードでルートが機能すれば、変更は完了です。

振り分け

タスク	開く
コレクションの型、スキーマ、インデックス、ローカル／リモートソース、またはロケールのプレフィックス	コレクション
フィルタリング、並べ替え、ページネーション、ナビゲーション、周辺コンテンツ、または検索	クエリ
Markdown、MDC、ContentRenderer、プローズコンポーネント、またはコードのハイライト	レンダリング
データベースアダプター、Markdown の処理、レンダラーのエイリアス、またはデプロイ先のストレージ	設定
フック、トランスフォーマー、カスタムソース、生コンテンツ、デバッグ、または Content v2 からの移行	高度な機能
ビジュアル編集、認証、メディア、下書き、または Git による公開	nuxt-studio スキル
ドキュメントの文章の作成または再構成	document-writer スキル

基本

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

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: 'page',
      source: 'docs/**',
      schema: z.object({
        updatedAt: z.date().optional(),
      }),
    }),
  },
})

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

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

npx nuxi typecheck を使用して、生成されたコレクションの型を確認します。クエリ結果が空の場合は、クエリのロジックを変更する前に、コレクションのソースに該当ファイルが含まれていることを確認してください。特に .navigation.yml に注意してください。