Nuxt をはじめよう
Nuxt の基本的なセットアップ方法と、プロジェクト構造の概要を解説します。
Nuxt とは
Nuxt は Vue 3 ベースのフルスタックフレームワークです。pages/ にファイルを置くだけでルーティングが自動生成され、SSR・SSG・ISR を設定ひとつで切り替えられます。
プロジェクトの作成
npx nuxi@latest init my-app
cd my-app
npm install
npm run dev
ブラウザで http://localhost:3000 にアクセスすると、デフォルトのウェルカムページが表示されます。
ディレクトリ構成
| ディレクトリ | 役割 |
|---|---|
pages/ | URL に対応するページ |
components/ | 再利用できる UI パーツ |
composables/ | 再利用できるロジック |
server/api/ | サーバー API エンドポイント |
content/ | Markdown などのコンテンツファイル |
まとめ
Nuxt は「設定より規約」の思想で設計されており、ファイルを置くだけで多くのことが自動化されます。まずは pages/index.vue を編集してみましょう。