Render Pages

コンテンツディレクトリ

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

組み込みのコンポーネントを使用してコンテンツをレンダリングします。

MongoDBのようなAPIを使用してコンテンツをクエリします。

MDC構文を使用して、Markdownファイル内でVueコンポーネントを使用します。

自動的にナビゲーションを生成します。

インストール

プロジェクトに@nuxt/contentモジュールをインストールしてください：

yarn add --dev @nuxt/content

npm install --save-dev @nuxt/content

pnpm add -D @nuxt/content

次に、nuxt.config.tsのmodulesセクションに@nuxt/contentを追加してください：

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

ページをレンダリングする

コンテンツページをレンダリングするには、ContentDoc コンポーネントを使用してキャッチオールルートを追加してください。

<template>
  <main>
    <ContentDoc />
  </main>
</template>

ドキュメンテーション

以下のURLにアクセスして、Contentモジュールの機能について詳細を学びましょう。クエリの構築方法やMDC構文を使用してMarkdownファイル内でVueコンポーネントをどのように利用するかなどを確認することができます。

コンテンツディレクトリ