Nuxt Content でできる表現方法まとめ

テキスト装飾

通常のテキストに加えて、太字・イタリック・打ち消し線・インラインコード が使えます。 組み合わせも可能で、太字かつイタリック のような表現もできます。

見出しレベル

h3 — セクションの小見出し

h3 は記事内のセクションをさらに細分化するときに使います。

h4 — さらに細かい区分け

h4 は補足説明や用語の定義など、特定のトピックを掘り下げる際に便利です。

リスト

箇条書き（順不同）

• Nuxt 4 はファイルベースルーティングを採用している
• pages/ にファイルを置くだけでルートが生成される
• ネストしたディレクトリで階層的なURLも作れる
  • 例：pages/articles/[slug].vue → /articles/hello
  • 例：pages/settings/profile.vue → /settings/profile

番号付きリスト

1. nuxi init でプロジェクトを作成する
2. npm install で依存関係をインストールする
3. npm run dev で開発サーバーを起動する
4. http://localhost:3000 にアクセスして確認する

引用（blockquote）

Nuxt は「設定より規約」の思想で設計されており、ファイルを置くだけで多くのことが自動化されます。

— Nuxt 公式ドキュメントより

リンク

Nuxt 公式サイト や Nuxt Content ドキュメント へのリンクをテキスト内に埋め込めます。

テーブル

コードブロック

インラインコード

useAsyncData・useFetch・defineEventHandler のような関数名はインラインコードで表記します。

Vue コンポーネント

<script setup lang="ts">
const { data: articles } = await useAsyncData('articles', () =>
  queryCollection('articles').order('date', 'DESC').all()
)
</script>

<template>
  <ul>
    <li v-for="article in articles" :key="article.path">
      {{ article.title }}
    </li>
  </ul>
</template>

TypeScript

interface Article {
  title: string
  description: string
  date: string
  path: string
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('ja-JP')
}

Shell コマンド

# @nuxt/content をインストール
npm install @nuxt/content

# ビルドして静的ファイルを生成
npm run build

水平線（区切り）

上のセクションと下のセクションを視覚的に区切るには、水平線を使います。

水平線はコンテンツの大きな切れ目に使うのが一般的です。

MDC — Markdown Components

@nuxt/content v3 では MDC（Markdown Components） 記法を使って、Markdown の中から Vue コンポーネントを直接呼び出せます。components/content/ に置いたコンポーネントが自動的に利用可能になります。

Callout コンポーネント

::コンポーネント名 で囲むとブロックコンポーネントとして展開されます。

title プロパティで見出しをカスタマイズ

title プロパティを渡すと、ラベル文字列を自由に変更できます。

MDC の書き方まとめ

// ブロックコンポーネント（props あり）
::callout{type="warning"}
本文テキスト
::

// インラインコンポーネント（将来の拡張例）
:badge{label="NEW"}

まとめ

@nuxt/content v3 では、標準的な Markdown 記法に加えて MDC による Vue コンポーネントの埋め込みができます。components/content/ にコンポーネントを置くだけで Markdown ファイルから参照でき、デザインの統一されたリッチなコンテンツを簡単に作れます。