🐡

[和訳] Nuxt3 公式サイト~Content Directory

2023/02/20に公開

この記事について

この記事はNuxt3 公式サイト Content Directory を和訳したものになります(日本語が不自然になってしまっている箇所があるのはごめんなさい)。
https://nuxt.com/docs/guide/directory-structure/content

Content Directory

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

✅ ビルドインコンポーネントでコンテンツをレンダリングします。
✅ MongoDB のような API でコンテンツを照会します。
✅ MDC 構文で Markdown ファイル内で Vue コンポーネントを使用します。
✅ ナビゲーションを自動生成します。

Get Started

Installation

プロジェクトに @nuxt/content モジュールをインストールします。

# yarn
$ yarn add --dev @nuxt/content

# npm
$ npm install --save-dev @nuxt/content

# pnpm
$ pnpm add -D @nuxt/content

次に、nuxt.config.tsmodules セクションに @nuxt/content を追加します。

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

Create Content

プロジェクトのルートディレクトリにある content/ ディレクトリ内に Markdown ファイルを置いてください。

content/index.md
# Hello Content

モジュールはそれらを自動的に読み込み、解析します。

Render Pages

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

pages/[...slug].vue
<template>
  <main>
    <ContentDoc />
  </main>
</template>

Documentation

クエリの構築や MDC 構文を使用した Markdown ファイル内での Vue コンポーネントを使用する方法など、コンテンツモジュールについては、下記リンクをご覧ください。
https://content.nuxtjs.org/

GitHubで編集を提案

Discussion

ログインするとコメントできます