content

content/ ディレクトリを使って、アプリケーション用のファイルベースの CMS を作成します。

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

  • 組み込みコンポーネントでコンテンツをレンダリングします。
  • MongoDB ライクな API でコンテンツをクエリします。
  • MDC 構文を使って Markdown ファイルで Vue コンポーネントを使用します。
  • ナビゲーションを自動的に生成します。
詳細については、Nuxt Content のドキュメントを参照してください。

Nuxt Content を有効にする

プロジェクトに @nuxt/content モジュールをインストールし、1 つのコマンドで nuxt.config.ts に追加します。

ターミナル
npx nuxt module add content

コンテンツを作成する

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

content/index.md
# Hello Content

モジュールはそれらを自動的にロードして解析します。

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

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

app/pages/[...slug].vue
<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>

ドキュメント

詳細については、https://content.nuxt.comにアクセスして、クエリの作成方法や MDC 構文を使って Markdown ファイルで Vue コンポーネントを使用する方法など、Content モジュールの機能について詳しく学んでください。