MarkdownにVueコンポーネントを埋め込む方法

Nuxt Contentを使用している場合、Markdownファイル内でVueコンポーネントを使用できます。ただし、正しい構文を使わないと、コンポーネント以降のコンテンツが表示されなくなる問題が発生します。

✅ 正しい方法: MDC構文を使用

Nuxt ContentではMDC (Markdown Components) 構文を使用します：

### セクション見出し

::ComponentName
::

通常のMarkdownコンテンツがここに続きます...

実例

### 業績予想 (ESTIMATES)

::NebiusFinancialsChart
::

**売上高 (Revenue) - 単位: 百万ドル ($MM)**

| 期間 | 2024A | 2025E |
| :--- |---:|---:|
| **1Q** | $11.4A | $55.3A |

❌ 間違った方法: HTMLタグ形式

以下のHTMLタグ形式は使用しないでください：

### セクション見出し

<ComponentName />

通常のMarkdownコンテンツがここに続きます...

問題点

HTMLタグ形式（<ComponentName />）を使用すると、Nuxt ContentのMDXパーサーが混乱し、コンポーネント以降のMarkdownコンテンツが全く表示されなくなります。

例えばチャートコンポーネントの下にデータテーブルがある場合、テーブルが完全に消えてしまいます。

コンポーネントにプロパティを渡す

プロパティを渡す場合も、MDC構文を使用します：

::ComponentName{title="カスタムタイトル" :data="myData"}
::

または、複数行で記述：

::ComponentName
---
title: カスタムタイトル
color: blue
---
::

コンポーネントの配置場所

コンポーネントは apps/web/app/components/content/ ディレクトリに配置します。

例: apps/web/app/components/content/NebiusFinancialsChart.vue

このディレクトリに配置すると、Nuxt Contentが自動的にコンポーネントを認識し、Markdownファイル内で使用できるようになります。

まとめ

✅ MDC構文を使用: ::ComponentName + ::
❌ HTMLタグは使用しない: <ComponentName />
コンポーネントは components/content/ に配置
プロパティは {prop="value"} 形式で渡す

この方法を守れば、Markdownコンテンツとコンポーネントを自由に組み合わせて、リッチなコンテンツページを作成できます。