[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"content-/nuxt-content-mdx-setup-guide":3,"all-pages-for-dir":282,"related-/nuxt-content-mdx-setup-guide":283,"og-image-/nuxt-content-mdx-setup-guide":302},{"id":4,"title":5,"body":6,"category":266,"concepts":266,"description":267,"extension":268,"meta":269,"navigation":270,"ogImage":266,"path":271,"project_name":266,"published":272,"publishedAt":273,"seo":274,"source":266,"stem":275,"tags":276,"todo":266,"unpublished":272,"updatedAt":266,"__hash__":281},"pages/2025-10/2025-10-01/nuxt-content-mdx-setup-guide.md","Nuxt Content + MDX サイトの初期構築手順",{"type":7,"value":8,"toc":258},"minimark",[9,13,17,30,33,63,66,178,181,189,192,221,224,254],[10,11,5],"h1",{"id":12},"nuxt-content-mdx-サイトの初期構築手順",[14,15,16],"h2",{"id":16},"ゴール",[18,19,20,24,27],"ul",{},[21,22,23],"li",{},"Nuxt 3 + @nuxt/content で Markdown / MDX を公開できるサイトを構築する。",[21,25,26],{},"Cloudflare Pages へデプロイできるドキュメント駆動構成を採用する。",[21,28,29],{},"将来的にバックエンド API や追加サービスを組み込めるディレクトリ構成を整える。",[14,31,32],{"id":32},"必要な環境",[18,34,35,43,54,57],{},[21,36,37,38,42],{},"Node.js 22.6 以上（Volta で ",[39,40,41],"code",{},"volta pin node@22.6.0"," 推奨）",[21,44,45,46,49,50,53],{},"pnpm 10 系（",[39,47,48],{},"packageManager"," に ",[39,51,52],{},"pnpm@10.10.0"," を指定）",[21,55,56],{},"Windows 10/11 + PowerShell 7、もしくは同等のシェル環境",[21,58,59,60],{},"リポジトリ: ",[39,61,62],{},"C:\\Users\\numbe\\Git_repo\\mdx-playground",[14,64,65],{"id":65},"セットアップ手順",[67,68,69,72,104,130,142,159,168],"ol",{},[21,70,71],{},"作業ツリーを確認し、既存変更をコミットまたは退避する。",[21,73,74,75],{},"主要ディレクトリを作成。\n",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-powershell shiki shiki-themes vitesse-light vitesse-light","New-Item -ItemType Directory -Path apps,packages,docs -ErrorAction SilentlyContinue\nNew-Item -ItemType Directory -Path apps/web -ErrorAction SilentlyContinue\nNew-Item -ItemType Directory -Path apps/api -ErrorAction SilentlyContinue\n","powershell","",[39,83,84,92,98],{"__ignoreMap":81},[85,86,89],"span",{"class":87,"line":88},"line",1,[85,90,91],{},"New-Item -ItemType Directory -Path apps,packages,docs -ErrorAction SilentlyContinue\n",[85,93,95],{"class":87,"line":94},2,[85,96,97],{},"New-Item -ItemType Directory -Path apps/web -ErrorAction SilentlyContinue\n",[85,99,101],{"class":87,"line":100},3,[85,102,103],{},"New-Item -ItemType Directory -Path apps/api -ErrorAction SilentlyContinue\n",[21,105,106,109,110],{},[39,107,108],{},"apps/web"," で Nuxt プロジェクトを初期化。\n",[76,111,113],{"className":78,"code":112,"language":80,"meta":81,"style":81},"cd apps/web\nnpx nuxi@latest init . --force\npnpm install\n",[39,114,115,120,125],{"__ignoreMap":81},[85,116,117],{"class":87,"line":88},[85,118,119],{},"cd apps/web\n",[85,121,122],{"class":87,"line":94},[85,123,124],{},"npx nuxi@latest init . --force\n",[85,126,127],{"class":87,"line":100},[85,128,129],{},"pnpm install\n",[21,131,132,133],{},"@nuxt/content と MDX 関連プラグインを追加。\n",[76,134,136],{"className":78,"code":135,"language":80,"meta":81,"style":81},"pnpm add @nuxt/content remark-gfm remark-math\n",[39,137,138],{"__ignoreMap":81},[85,139,140],{"class":87,"line":88},[85,141,135],{},[21,143,144,147,148,151,152,151,155,158],{},[39,145,146],{},"apps/web/nuxt.config.ts"," を編集し、",[39,149,150],{},"documentDriven","、",[39,153,154],{},"sqliteConnector",[39,156,157],{},"sources.memo"," を設定する。",[21,160,161,49,164,167],{},[39,162,163],{},"apps/web/content.config.ts",[39,165,166],{},"pages"," コレクションを定義し、すべての Markdown/MDX を読み込めるようにする。",[21,169,170,173,174,177],{},[39,171,172],{},"content/"," 配下に初期記事と ",[39,175,176],{},"index.mdx"," を作成する。",[14,179,180],{"id":180},"推奨ディレクトリ構成",[76,182,187],{"className":183,"code":185,"language":186},[184],"language-text","mdx-playground/\n├─ apps/\n│  ├─ web/    # Nuxt 3 + @nuxt/content フロントエンド\n│  └─ api/    # バックエンド用 Nitro など（将来的に追加）\n├─ packages/  # 共有 UI や設定パッケージ\n├─ memo/      # 執筆メモ（Content ソースとしても利用）\n├─ docs/      # 運用・設計ドキュメント\n└─ tools/     # スクリプトや補助ツール\n","text",[39,188,185],{"__ignoreMap":81},[14,190,191],{"id":191},"開発とデプロイ",[18,193,194,200,210],{},[21,195,196,197],{},"ローカル開発: ",[39,198,199],{},"pnpm dev -- --port 3000",[21,201,202,203,206,207],{},"静的生成: ",[39,204,205],{},"pnpm run build"," または ",[39,208,209],{},"npx nuxi generate",[21,211,212,213,216,217,220],{},"Cloudflare Pages へは GitHub Actions を利用し、",[39,214,215],{},"web"," と ",[39,218,219],{},"api"," を個別ワークスペースとしてビルドする。",[14,222,223],{"id":223},"トラブルシュートのヒント",[18,225,226,237,247],{},[21,227,228,229,232,233,236],{},"Nuxt Content のクエリは ",[39,230,231],{},"queryCollection()"," を利用し、",[39,234,235],{},".path()"," などで条件を明示する。",[21,238,239,242,243,246],{},[39,240,241],{},"pnpm install"," を実行してから依存追加コマンドを実行し、",[39,244,245],{},".pnpm"," 情報を最新化する。",[21,248,249,250,253],{},"SQLite ネイティブ接続を有効にするため、",[39,251,252],{},"experimental.sqliteConnector = \"native\""," を指定し、Windows では Node.js 22.6 以上を利用する。",[255,256,257],"style",{},"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);}",{"title":81,"searchDepth":94,"depth":94,"links":259},[260,261,262,263,264,265],{"id":16,"depth":94,"text":16},{"id":32,"depth":94,"text":32},{"id":65,"depth":94,"text":65},{"id":180,"depth":94,"text":180},{"id":191,"depth":94,"text":191},{"id":223,"depth":94,"text":223},null,"Nuxt 3 と Nuxt Content を使ったメモサイトのセットアップと構成例","md",{},true,"/nuxt-content-mdx-setup-guide",false,"2025-10-01T00:00:00.000Z",{"title":5,"description":267},"2025-10/2025-10-01/nuxt-content-mdx-setup-guide",[277,278,279,280],"nuxt","content","mdx","setup","hFc-G4CqUYJSztN5_G0W9O930el_v-Pj12jBYG4uXqQ",[],[284,287,291,295,299],{"title":285,"path":286,"publishedAt":273},"Nuxt Content + MDX サイトの要件整理","/nuxt-content-mdx-requirements",{"title":288,"path":289,"publishedAt":290},"Nuxt ContentでMDXが使えない理由","/nuxt-content-mdx-investigation","2025-12-16T00:00:00.000Z",{"title":292,"path":293,"publishedAt":294},"Nuxt Content + Pages ハイブリッドアーキテクチャ：プロジェクト要件定義書","/nuxt-hybrid-content-architecture","2025-11-29T00:00:00.000Z",{"title":296,"path":297,"publishedAt":298},"Nuxt Content: ファイル監視と自動更新の仕組み","/nuxt-content-file-watch-and-auto-update","2025-10-04T00:00:00.000Z",{"title":300,"path":301,"publishedAt":298},"Nuxt Content: SQLite フィールドマッピング仕様","/nuxt-content-sqlite-field-mapping","https://log.eurekapu.com/og/blog/nuxt-content-mdx-setup-guide.png?v=2025-10-01T00%3A00%3A00.000Z&title=Nuxt%20Content%20%2B%20MDX%20%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%88%9D%E6%9C%9F%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86&author=Kei%20Komatsu&sig=11086d1895865996",1785654654579]