• #nuxt
  • #mdx
  • #mdc
  • #nuxt-content
未分類

Nuxt ContentでMDXが使えない理由

結論

Nuxt Content（@nuxt/content）は、MDXをネイティブサポートしていない。 Nuxt Contentは独自の**MDC（Markdown Components）**記法を採用しており、MDXとは別物である。

現在の環境

// package.json
{
  "@nuxt/content": "^3.7.1",
  "nuxt": "^4.1.2"
}

// nuxt.config.ts
modules: [
  "@nuxtjs/sitemap",
  "@nuxt/content"  // MDXモジュールは含まれていない
],
content: {
  markdown: {
    mdc: true,  // MDC（Markdown Components）が有効
    // ...
  }
}

MDX vs MDC の違い

機能MDXMDC (Nuxt Content)
コンポーネント記法<Component />::component
インラインコンポーネント<Badge>text</Badge>:badge[text]
propsprop={value} または prop="value"{prop="value"}
JavaScript実行{expression}不可
Reactフック使える使えない（Vueベース）
ランタイムReactVue

MDXの例

export const greeting = "Hello!"

<Alert type="warning">
  {greeting} これはMDXです。
</Alert>

MDCの例

::alert{type="warning"}
これはMDCです。JavaScript式は使えません。
::

なぜMDXが動かなかったか

テストで確認した動作

.mdxファイルを作成してテストした結果：

  1. ファイルは読み込まれる - .mdx拡張子でも表示される
  2. JSX構文は実行されない - <Component />がそのまま文字列として表示
  3. JavaScript式は展開されない - {expression}がそのまま表示
  4. export文は無視される - コードとしてレンダリングされない

Nuxt Contentが.mdxファイルを通常のMarkdownとして処理しているため、このような挙動になる。

MDXを使いたい場合の選択肢

1. @nuxtjs/mdx モジュールを使う

Nuxt MDX は別モジュールとして提供されている。

pnpm add @nuxtjs/mdx

// nuxt.config.ts
modules: [
  '@nuxtjs/mdx'
]

注意点:

  • @nuxt/contentとは別物
  • 現在のプロジェクト構成（content.config.ts、SQLiteなど）との互換性は不明
  • メンテナンス状況を要確認

2. nuxt-mdx（コミュニティパッケージ）

nuxt-mdx - Nuxt 3.0用のMDXローダー

3. 現状維持（MDC使用）

MDCはMDXほど柔軟ではないが、以下のメリットがある：

  • Nuxt Contentとの完全な統合
  • SQLiteデータベース連携
  • コレクション機能
  • Cloudflare D1対応

GitHubでの議論

Support content in MDX format · Issue #2498

Other frameworks for authoring static content such as Docusaurus, Vuepress/Vitepress, or Astro.JS use either MDX or a format that is very similar to it. The biggest difference from the Markdown extensions Nuxt Content uses is that components are written using angle brackets (<>...</>) instead of double colons :: ... ::.

MDXサポートはNuxt Contentの機能リクエストとして存在するが、現時点では実装されていない。

このプロジェクトでのMDC使用例

実際にこのプロジェクトではMDCを使ってMarkdown内からVueコンポーネントを呼び出している。

使用例

content/2025-11-22/how-to-embed-vue-components-in-markdown.md より：

::NebiusFinancialsChart
::

これで app/components/content/NebiusFinancialsChart.vue が呼び出される。

propsの渡し方

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

MDCを使っているファイル一覧

  • 2025-11-22/how-to-embed-vue-components-in-markdown.md - MDCの使い方ガイド
  • 2025-11-22/nbis-nebius-investment-analysis.md - 財務チャートコンポーネント
  • 2025-12-11/pe-ratio-spread-analysis.md
  • 2025-12-12/wav-vs-mp3.md
  • その他多数

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

MDCで呼び出すコンポーネントは app/components/content/ に配置する：

app/components/content/
├── NebiusFinancialsChart.vue
├── ProseCode.vue
└── ...

このプロジェクトの経緯

プロジェクト名がmdx-playgroundとなっているが、これは当初MDXを試すために作成されたもの。しかし、実際にはNuxt ContentのMDC機能を使っており、純粋なMDXは使用していない。

結論として、MDXは使っていないが、MDCで同等の機能を実現している。

トップページの説明文は以下のように修正された：

  • 修正前: 「Nuxt Content + MDX を使ったメモ公開サイトです」
  • 修正後: 「Nuxt Content を使ったメモ公開サイトです」

まとめ

質問回答
Nuxt ContentでMDXは使えるか？ネイティブでは使えない
代替手段は？MDC（Markdown Components）
MDXを使いたい場合は？@nuxtjs/mdxを別途導入
現在のプロジェクトは？MDCを使用中

参考リンク