[{"data":1,"prerenderedAt":916},["ShallowReactive",2],{"content-/nuxt-content-mdx-investigation":3,"all-pages-for-dir":894,"related-/nuxt-content-mdx-investigation":895,"og-image-/nuxt-content-mdx-investigation":915},{"id":4,"title":5,"body":6,"category":882,"concepts":882,"description":883,"extension":389,"meta":884,"navigation":364,"ogImage":882,"path":885,"project_name":882,"published":886,"publishedAt":887,"seo":888,"source":882,"stem":889,"tags":890,"todo":882,"unpublished":886,"updatedAt":882,"__hash__":893},"pages/2025-12/2025-12-16/nuxt-content-mdx-investigation.md","Nuxt ContentでMDXが使えない理由",{"type":7,"value":8,"toc":856},"minimark",[9,13,17,29,32,114,220,224,343,348,381,385,408,412,415,421,456,466,470,474,484,502,535,540,554,558,566,570,573,587,591,598,612,615,619,622,625,631,645,652,655,674,678,705,708,715,723,726,737,742,745,759,762,815,818,852],[10,11,5],"h1",{"id":12},"nuxt-contentでmdxが使えない理由",[14,15,16],"h2",{"id":16},"結論",[18,19,20,24,25,28],"p",{},[21,22,23],"strong",{},"Nuxt Content（@nuxt/content）は、MDXをネイティブサポートしていない。"," Nuxt Contentは独自の",[21,26,27],{},"MDC（Markdown Components）","記法を採用しており、MDXとは別物である。",[14,30,31],{"id":31},"現在の環境",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-json shiki shiki-themes vitesse-light vitesse-light","// package.json\n{\n  \"@nuxt/content\": \"^3.7.1\",\n  \"nuxt\": \"^4.1.2\"\n}\n","json","",[40,41,42,51,58,88,108],"code",{"__ignoreMap":38},[43,44,47],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sxvE3","// package.json\n",[43,52,54],{"class":45,"line":53},2,[43,55,57],{"class":56},"shFtX","{\n",[43,59,61,65,69,72,75,79,83,85],{"class":45,"line":60},3,[43,62,64],{"class":63},"sqvqQ","  \"",[43,66,68],{"class":67},"sz8Xr","@nuxt/content",[43,70,71],{"class":63},"\"",[43,73,74],{"class":56},":",[43,76,78],{"class":77},"sMJiu"," \"",[43,80,82],{"class":81},"sdGka","^3.7.1",[43,84,71],{"class":77},[43,86,87],{"class":56},",\n",[43,89,91,93,96,98,100,102,105],{"class":45,"line":90},4,[43,92,64],{"class":63},[43,94,95],{"class":67},"nuxt",[43,97,71],{"class":63},[43,99,74],{"class":56},[43,101,78],{"class":77},[43,103,104],{"class":81},"^4.1.2",[43,106,107],{"class":77},"\"\n",[43,109,111],{"class":45,"line":110},5,[43,112,113],{"class":56},"}\n",[33,115,119],{"className":116,"code":117,"language":118,"meta":38,"style":38},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// nuxt.config.ts\nmodules: [\n  \"@nuxtjs/sitemap\",\n  \"@nuxt/content\"  // MDXモジュールは含まれていない\n],\ncontent: {\n  markdown: {\n    mdc: true,  // MDC（Markdown Components）が有効\n    // ...\n  }\n}\n","typescript",[40,120,121,126,137,148,159,164,175,185,203,209,215],{"__ignoreMap":38},[43,122,123],{"class":45,"line":46},[43,124,125],{"class":49},"// nuxt.config.ts\n",[43,127,128,132,134],{"class":45,"line":53},[43,129,131],{"class":130},"senZ8","modules",[43,133,74],{"class":56},[43,135,136],{"class":56}," [\n",[43,138,139,141,144,146],{"class":45,"line":60},[43,140,64],{"class":77},[43,142,143],{"class":81},"@nuxtjs/sitemap",[43,145,71],{"class":77},[43,147,87],{"class":56},[43,149,150,152,154,156],{"class":45,"line":90},[43,151,64],{"class":77},[43,153,68],{"class":81},[43,155,71],{"class":77},[43,157,158],{"class":49},"  // MDXモジュールは含まれていない\n",[43,160,161],{"class":45,"line":110},[43,162,163],{"class":56},"],\n",[43,165,167,170,172],{"class":45,"line":166},6,[43,168,169],{"class":130},"content",[43,171,74],{"class":56},[43,173,174],{"class":56}," {\n",[43,176,178,181,183],{"class":45,"line":177},7,[43,179,180],{"class":130},"  markdown",[43,182,74],{"class":56},[43,184,174],{"class":56},[43,186,188,191,193,197,200],{"class":45,"line":187},8,[43,189,190],{"class":130},"    mdc",[43,192,74],{"class":56},[43,194,196],{"class":195},"sHkkW"," true",[43,198,199],{"class":56},",",[43,201,202],{"class":49},"  // MDC（Markdown Components）が有効\n",[43,204,206],{"class":45,"line":205},9,[43,207,208],{"class":49},"    // ...\n",[43,210,212],{"class":45,"line":211},10,[43,213,214],{"class":56},"  }\n",[43,216,218],{"class":45,"line":217},11,[43,219,113],{"class":56},[14,221,223],{"id":222},"mdx-vs-mdc-の違い","MDX vs MDC の違い",[225,226,227,243],"table",{},[228,229,230],"thead",{},[231,232,233,237,240],"tr",{},[234,235,236],"th",{},"機能",[234,238,239],{},"MDX",[234,241,242],{},"MDC (Nuxt Content)",[244,245,246,264,281,302,317,330],"tbody",{},[231,247,248,254,259],{},[249,250,251],"td",{},[21,252,253],{},"コンポーネント記法",[249,255,256],{},[40,257,258],{},"\u003CComponent />",[249,260,261],{},[40,262,263],{},"::component",[231,265,266,271,276],{},[249,267,268],{},[21,269,270],{},"インラインコンポーネント",[249,272,273],{},[40,274,275],{},"\u003CBadge>text\u003C/Badge>",[249,277,278],{},[40,279,280],{},":badge[text]",[231,282,283,288,297],{},[249,284,285],{},[21,286,287],{},"props",[249,289,290,293,294],{},[40,291,292],{},"prop={value}"," または ",[40,295,296],{},"prop=\"value\"",[249,298,299],{},[40,300,301],{},"{prop=\"value\"}",[231,303,304,309,314],{},[249,305,306],{},[21,307,308],{},"JavaScript実行",[249,310,311],{},[40,312,313],{},"{expression}",[249,315,316],{},"不可",[231,318,319,324,327],{},[249,320,321],{},[21,322,323],{},"Reactフック",[249,325,326],{},"使える",[249,328,329],{},"使えない（Vueベース）",[231,331,332,337,340],{},[249,333,334],{},[21,335,336],{},"ランタイム",[249,338,339],{},"React",[249,341,342],{},"Vue",[344,345,347],"h3",{"id":346},"mdxの例","MDXの例",[33,349,353],{"className":350,"code":351,"language":352,"meta":38,"style":38},"language-mdx shiki shiki-themes vitesse-light vitesse-light","export const greeting = \"Hello!\"\n\n\u003CAlert type=\"warning\">\n  {greeting} これはMDXです。\n\u003C/Alert>\n","mdx",[40,354,355,360,366,371,376],{"__ignoreMap":38},[43,356,357],{"class":45,"line":46},[43,358,359],{},"export const greeting = \"Hello!\"\n",[43,361,362],{"class":45,"line":53},[43,363,365],{"emptyLinePlaceholder":364},true,"\n",[43,367,368],{"class":45,"line":60},[43,369,370],{},"\u003CAlert type=\"warning\">\n",[43,372,373],{"class":45,"line":90},[43,374,375],{},"  {greeting} これはMDXです。\n",[43,377,378],{"class":45,"line":110},[43,379,380],{},"\u003C/Alert>\n",[344,382,384],{"id":383},"mdcの例","MDCの例",[33,386,390],{"className":387,"code":388,"language":389,"meta":38,"style":38},"language-md shiki shiki-themes vitesse-light vitesse-light","::alert{type=\"warning\"}\nこれはMDCです。JavaScript式は使えません。\n::\n","md",[40,391,392,398,403],{"__ignoreMap":38},[43,393,394],{"class":45,"line":46},[43,395,397],{"class":396},"sG7-3","::alert{type=\"warning\"}\n",[43,399,400],{"class":45,"line":53},[43,401,402],{"class":396},"これはMDCです。JavaScript式は使えません。\n",[43,404,405],{"class":45,"line":60},[43,406,407],{"class":396},"::\n",[14,409,411],{"id":410},"なぜmdxが動かなかったか","なぜMDXが動かなかったか",[344,413,414],{"id":414},"テストで確認した動作",[18,416,417,420],{},[40,418,419],{},".mdx","ファイルを作成してテストした結果：",[422,423,424,434,442,450],"ol",{},[425,426,427,430,431,433],"li",{},[21,428,429],{},"ファイルは読み込まれる"," - ",[40,432,419],{},"拡張子でも表示される",[425,435,436,430,439,441],{},[21,437,438],{},"JSX構文は実行されない",[40,440,258],{},"がそのまま文字列として表示",[425,443,444,430,447,449],{},[21,445,446],{},"JavaScript式は展開されない",[40,448,313],{},"がそのまま表示",[425,451,452,455],{},[21,453,454],{},"export文は無視される"," - コードとしてレンダリングされない",[18,457,458,459,461,462,465],{},"Nuxt Contentが",[40,460,419],{},"ファイルを",[21,463,464],{},"通常のMarkdownとして処理","しているため、このような挙動になる。",[14,467,469],{"id":468},"mdxを使いたい場合の選択肢","MDXを使いたい場合の選択肢",[344,471,473],{"id":472},"_1-nuxtjsmdx-モジュールを使う","1. @nuxtjs/mdx モジュールを使う",[18,475,476,483],{},[477,478,482],"a",{"href":479,"rel":480},"https://mdx.nuxtjs.org/",[481],"nofollow","Nuxt MDX"," は別モジュールとして提供されている。",[33,485,489],{"className":486,"code":487,"language":488,"meta":38,"style":38},"language-bash shiki shiki-themes vitesse-light vitesse-light","pnpm add @nuxtjs/mdx\n","bash",[40,490,491],{"__ignoreMap":38},[43,492,493,496,499],{"class":45,"line":46},[43,494,495],{"class":130},"pnpm",[43,497,498],{"class":81}," add",[43,500,501],{"class":81}," @nuxtjs/mdx\n",[33,503,505],{"className":116,"code":504,"language":118,"meta":38,"style":38},"// nuxt.config.ts\nmodules: [\n  '@nuxtjs/mdx'\n]\n",[40,506,507,511,519,530],{"__ignoreMap":38},[43,508,509],{"class":45,"line":46},[43,510,125],{"class":49},[43,512,513,515,517],{"class":45,"line":53},[43,514,131],{"class":130},[43,516,74],{"class":56},[43,518,136],{"class":56},[43,520,521,524,527],{"class":45,"line":60},[43,522,523],{"class":77},"  '",[43,525,526],{"class":81},"@nuxtjs/mdx",[43,528,529],{"class":77},"'\n",[43,531,532],{"class":45,"line":90},[43,533,534],{"class":56},"]\n",[18,536,537],{},[21,538,539],{},"注意点:",[541,542,543,548,551],"ul",{},[425,544,545,547],{},[40,546,68],{},"とは別物",[425,549,550],{},"現在のプロジェクト構成（content.config.ts、SQLiteなど）との互換性は不明",[425,552,553],{},"メンテナンス状況を要確認",[344,555,557],{"id":556},"_2-nuxt-mdxコミュニティパッケージ","2. nuxt-mdx（コミュニティパッケージ）",[18,559,560,565],{},[477,561,564],{"href":562,"rel":563},"https://github.com/conradludgate/nuxt-mdx",[481],"nuxt-mdx"," - Nuxt 3.0用のMDXローダー",[344,567,569],{"id":568},"_3-現状維持mdc使用","3. 現状維持（MDC使用）",[18,571,572],{},"MDCはMDXほど柔軟ではないが、以下のメリットがある：",[541,574,575,578,581,584],{},[425,576,577],{},"Nuxt Contentとの完全な統合",[425,579,580],{},"SQLiteデータベース連携",[425,582,583],{},"コレクション機能",[425,585,586],{},"Cloudflare D1対応",[14,588,590],{"id":589},"githubでの議論","GitHubでの議論",[18,592,593],{},[477,594,597],{"href":595,"rel":596},"https://github.com/nuxt/content/issues/2498",[481],"Support content in MDX format · Issue #2498",[599,600,601],"blockquote",{},[18,602,603,604,607,608,611],{},"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 (",[40,605,606],{},"\u003C>...\u003C/>",") instead of double colons ",[40,609,610],{},":: ... ::",".",[18,613,614],{},"MDXサポートはNuxt Contentの機能リクエストとして存在するが、現時点では実装されていない。",[14,616,618],{"id":617},"このプロジェクトでのmdc使用例","このプロジェクトでのMDC使用例",[18,620,621],{},"実際にこのプロジェクトではMDCを使ってMarkdown内からVueコンポーネントを呼び出している。",[344,623,624],{"id":624},"使用例",[18,626,627,630],{},[40,628,629],{},"content/2025-11-22/how-to-embed-vue-components-in-markdown.md"," より：",[33,632,634],{"className":387,"code":633,"language":389,"meta":38,"style":38},"::NebiusFinancialsChart\n::\n",[40,635,636,641],{"__ignoreMap":38},[43,637,638],{"class":45,"line":46},[43,639,640],{"class":396},"::NebiusFinancialsChart\n",[43,642,643],{"class":45,"line":53},[43,644,407],{"class":396},[18,646,647,648,651],{},"これで ",[40,649,650],{},"app/components/content/NebiusFinancialsChart.vue"," が呼び出される。",[344,653,654],{"id":654},"propsの渡し方",[33,656,658],{"className":387,"code":657,"language":389,"meta":38,"style":38},"::ComponentName{title=\"カスタムタイトル\" :data=\"myData\"}\nコンテンツ\n::\n",[40,659,660,665,670],{"__ignoreMap":38},[43,661,662],{"class":45,"line":46},[43,663,664],{"class":396},"::ComponentName{title=\"カスタムタイトル\" :data=\"myData\"}\n",[43,666,667],{"class":45,"line":53},[43,668,669],{"class":396},"コンテンツ\n",[43,671,672],{"class":45,"line":60},[43,673,407],{"class":396},[344,675,677],{"id":676},"mdcを使っているファイル一覧","MDCを使っているファイル一覧",[541,679,680,686,692,697,702],{},[425,681,682,685],{},[40,683,684],{},"2025-11-22/how-to-embed-vue-components-in-markdown.md"," - MDCの使い方ガイド",[425,687,688,691],{},[40,689,690],{},"2025-11-22/nbis-nebius-investment-analysis.md"," - 財務チャートコンポーネント",[425,693,694],{},[40,695,696],{},"2025-12-11/pe-ratio-spread-analysis.md",[425,698,699],{},[40,700,701],{},"2025-12-12/wav-vs-mp3.md",[425,703,704],{},"その他多数",[344,706,707],{"id":707},"コンポーネントの配置場所",[18,709,710,711,714],{},"MDCで呼び出すコンポーネントは ",[40,712,713],{},"app/components/content/"," に配置する：",[33,716,721],{"className":717,"code":719,"language":720},[718],"language-text","app/components/content/\n├── NebiusFinancialsChart.vue\n├── ProseCode.vue\n└── ...\n","text",[40,722,719],{"__ignoreMap":38},[14,724,725],{"id":725},"このプロジェクトの経緯",[18,727,728,729,732,733,736],{},"プロジェクト名が",[40,730,731],{},"mdx-playground","となっているが、これは当初MDXを試すために作成されたもの。しかし、実際にはNuxt Contentの",[21,734,735],{},"MDC","機能を使っており、純粋なMDXは使用していない。",[18,738,739],{},[21,740,741],{},"結論として、MDXは使っていないが、MDCで同等の機能を実現している。",[18,743,744],{},"トップページの説明文は以下のように修正された：",[541,746,747,753],{},[425,748,749,752],{},[21,750,751],{},"修正前",": 「Nuxt Content + MDX を使ったメモ公開サイトです」",[425,754,755,758],{},[21,756,757],{},"修正後",": 「Nuxt Content を使ったメモ公開サイトです」",[14,760,761],{"id":761},"まとめ",[225,763,764,774],{},[228,765,766],{},[231,767,768,771],{},[234,769,770],{},"質問",[234,772,773],{},"回答",[244,775,776,786,795,805],{},[231,777,778,781],{},[249,779,780],{},"Nuxt ContentでMDXは使えるか？",[249,782,783],{},[21,784,785],{},"ネイティブでは使えない",[231,787,788,791],{},[249,789,790],{},"代替手段は？",[249,792,793],{},[21,794,27],{},[231,796,797,800],{},[249,798,799],{},"MDXを使いたい場合は？",[249,801,802,804],{},[21,803,526],{},"を別途導入",[231,806,807,810],{},[249,808,809],{},"現在のプロジェクトは？",[249,811,812],{},[21,813,814],{},"MDCを使用中",[14,816,817],{"id":817},"参考リンク",[541,819,820,827,833,839,846],{},[425,821,822],{},[477,823,826],{"href":824,"rel":825},"https://nuxt.com/modules/mdx",[481],"@nuxtjs/mdx · Nuxt Modules",[425,828,829],{},[477,830,832],{"href":595,"rel":831},[481],"Support content in MDX format · Issue #2498 · nuxt/content",[425,834,835],{},[477,836,838],{"href":479,"rel":837},[481],"Introduction - Nuxt MDX",[425,840,841],{},[477,842,845],{"href":843,"rel":844},"https://content.nuxt.com/docs/files/markdown",[481],"Markdown - Nuxt Content",[425,847,848],{},[477,849,851],{"href":562,"rel":850},[481],"GitHub - conradludgate/nuxt-mdx",[853,854,855],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}",{"title":38,"searchDepth":53,"depth":53,"links":857},[858,859,860,864,867,872,873,879,880,881],{"id":16,"depth":53,"text":16},{"id":31,"depth":53,"text":31},{"id":222,"depth":53,"text":223,"children":861},[862,863],{"id":346,"depth":60,"text":347},{"id":383,"depth":60,"text":384},{"id":410,"depth":53,"text":411,"children":865},[866],{"id":414,"depth":60,"text":414},{"id":468,"depth":53,"text":469,"children":868},[869,870,871],{"id":472,"depth":60,"text":473},{"id":556,"depth":60,"text":557},{"id":568,"depth":60,"text":569},{"id":589,"depth":53,"text":590},{"id":617,"depth":53,"text":618,"children":874},[875,876,877,878],{"id":624,"depth":60,"text":624},{"id":654,"depth":60,"text":654},{"id":676,"depth":60,"text":677},{"id":707,"depth":60,"text":707},{"id":725,"depth":53,"text":725},{"id":761,"depth":53,"text":761},{"id":817,"depth":53,"text":817},null,"Nuxt Content v3ではMDXがサポートされておらず、代わりにMDC（Markdown Components）を使用する必要がある",{},"/nuxt-content-mdx-investigation",false,"2025-12-16T00:00:00.000Z",{"title":5,"description":883},"2025-12/2025-12-16/nuxt-content-mdx-investigation",[95,352,891,892],"mdc","nuxt-content","MazIjc492ef3s4MlYrshVXoBU0eMj_2Da9EOwrIaGPI",[],[896,900,904,907,911],{"title":897,"path":898,"publishedAt":899},"/blog のカレンダーが一瞬光って消える hydration mismatch を payload null 化で突き止めた","/blog-payload-null-root-fix","2026-06-05T00:00:00.000Z",{"title":901,"path":902,"publishedAt":903},"Nuxt Content v3 + Cloudflare Pages で直リンク時に404になる問題の解決","/nuxt-content-cloudflare-404-fix","2026-02-11T00:00:00.000Z",{"title":905,"path":906,"publishedAt":903},"WordPressブログをNuxt 3 + Cloudflare Pagesに移行した記録","/pon-blog-wordpress-to-nuxt3-migration-2026-02-11",{"title":908,"path":909,"publishedAt":910},"Nuxt 4 + @nuxt/content の開発サーバー起動が遅い原因と対策","/nuxt-dev-startup-time","2026-01-10T00:00:00.000Z",{"title":912,"path":913,"publishedAt":914},"@nuxt/content「UNIQUE constraint failed: _content_pages.__hash__」エラーの原因と解決策","/nuxt-content-sqlite-unique-constraint","2026-01-06T00:00:00.000Z","https://log.eurekapu.com/og/blog/nuxt-content-mdx-investigation.png?v=2025-12-16T00%3A00%3A00.000Z&title=Nuxt%20Content%E3%81%A7MDX%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E7%90%86%E7%94%B1&author=Kei%20Komatsu&sig=b8a25bd333a06b4a",1785654952838]