[{"data":1,"prerenderedAt":191},["ShallowReactive",2],{"article-hello-nuxt":3},{"id":4,"title":5,"body":6,"date":182,"description":183,"extension":184,"meta":185,"navigation":186,"path":187,"seo":188,"stem":189,"__hash__":190},"articles\u002Farticles\u002Fhello-nuxt.md","Nuxt をはじめよう",{"type":7,"value":8,"toc":176},"minimark",[9,14,23,26,83,90,93,162,165,172],[10,11,13],"h2",{"id":12},"nuxt-とは","Nuxt とは",[15,16,17,18,22],"p",{},"Nuxt は Vue 3 ベースのフルスタックフレームワークです。",[19,20,21],"code",{},"pages\u002F"," にファイルを置くだけでルーティングが自動生成され、SSR・SSG・ISR を設定ひとつで切り替えられます。",[10,24,25],{"id":25},"プロジェクトの作成",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-bash shiki shiki-themes github-light github-dark","npx nuxi@latest init my-app\ncd my-app\nnpm install\nnpm run dev\n","bash","",[19,34,35,54,63,72],{"__ignoreMap":32},[36,37,40,44,48,51],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sScJk","npx",[36,45,47],{"class":46},"sZZnC"," nuxi@latest",[36,49,50],{"class":46}," init",[36,52,53],{"class":46}," my-app\n",[36,55,57,61],{"class":38,"line":56},2,[36,58,60],{"class":59},"sj4cs","cd",[36,62,53],{"class":46},[36,64,66,69],{"class":38,"line":65},3,[36,67,68],{"class":42},"npm",[36,70,71],{"class":46}," install\n",[36,73,75,77,80],{"class":38,"line":74},4,[36,76,68],{"class":42},[36,78,79],{"class":46}," run",[36,81,82],{"class":46}," dev\n",[15,84,85,86,89],{},"ブラウザで ",[19,87,88],{},"http:\u002F\u002Flocalhost:3000"," にアクセスすると、デフォルトのウェルカムページが表示されます。",[10,91,92],{"id":92},"ディレクトリ構成",[94,95,96,109],"table",{},[97,98,99],"thead",{},[100,101,102,106],"tr",{},[103,104,105],"th",{},"ディレクトリ",[103,107,108],{},"役割",[110,111,112,122,132,142,152],"tbody",{},[100,113,114,119],{},[115,116,117],"td",{},[19,118,21],{},[115,120,121],{},"URL に対応するページ",[100,123,124,129],{},[115,125,126],{},[19,127,128],{},"components\u002F",[115,130,131],{},"再利用できる UI パーツ",[100,133,134,139],{},[115,135,136],{},[19,137,138],{},"composables\u002F",[115,140,141],{},"再利用できるロジック",[100,143,144,149],{},[115,145,146],{},[19,147,148],{},"server\u002Fapi\u002F",[115,150,151],{},"サーバー API エンドポイント",[100,153,154,159],{},[115,155,156],{},[19,157,158],{},"content\u002F",[115,160,161],{},"Markdown などのコンテンツファイル",[10,163,164],{"id":164},"まとめ",[15,166,167,168,171],{},"Nuxt は「設定より規約」の思想で設計されており、ファイルを置くだけで多くのことが自動化されます。まずは ",[19,169,170],{},"pages\u002Findex.vue"," を編集してみましょう。",[173,174,175],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":32,"searchDepth":56,"depth":56,"links":177},[178,179,180,181],{"id":12,"depth":56,"text":13},{"id":25,"depth":56,"text":25},{"id":92,"depth":56,"text":92},{"id":164,"depth":56,"text":164},"2026-04-28T23:00:00+09:00","Nuxt の基本的なセットアップ方法と、プロジェクト構造の概要を解説します。","md",{},true,"\u002Farticles\u002Fhello-nuxt",{"title":5,"description":183},"articles\u002Fhello-nuxt","dJgeWR8Jp-wvIT2KoxdDWbpEeYEhJmxCGw9-NhVxxGI",1777568743386]