content
content/ ディレクトリを使用して、アプリケーションのファイルベースCMSを作成します。
Nuxt Content はプロジェクト内の content/ ディレクトリ を読み取り、.md、.yml、.csv、.json ファイルを解析して、アプリケーションのファイルベースCMSを作成します。
- 組み込みコンポーネントでコンテンツをレンダリングします。
- MongoDBライクなAPIでコンテンツをクエリします。
- MDC構文を使用して、MarkdownファイルでVueコンポーネントを使用します。
- ナビゲーションを自動生成します。
Nuxt Content の有効化
プロジェクトに @nuxt/content モジュールをインストールし、1つのコマンドで nuxt.config.ts に追加します。
ターミナル
npx nuxi module add content
コンテンツの作成
Markdownファイルを content/ ディレクトリに配置します。
content/index.md
# Hello Content
モジュールはそれらを自動的にロードして解析します。
コンテンツのレンダリング
コンテンツページをレンダリングするには、キャッチオールルート を使用して <ContentDoc> コンポーネントを追加します。
pages/[...slug].vue
<template>
<main>
<!-- ContentDoc returns content for `$route.path` by default or you can pass a `path` prop -->
<ContentDoc />
</main>
</template>
ドキュメント
https://content.nuxt.com にアクセスして、クエリ方法やMDC構文を使用してMarkdownファイルでVueコンポーネントを使用する方法など、コンテンツモジュールの機能について詳しく学習してください。