はじめに
Vue.js を使った Web アプリケーション開発において、Nuxt 3 は非常に強力なフレームワークです。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）、柔軟なルーティングなど、多くの機能を備えており、シンプルな構成でスケーラブルな Web サイトを構築できます。
この記事では、Nuxt 3 の概要や基本的な使い方を記載します。
Nuxt 3 とは？
Nuxt 3 は Vue 3 をベースにしたアプリケーションフレームワークで、以下の特徴を持っています。
- Vue 3 Composition API 対応
- SSR（サーバーサイドレンダリング）と SSG（静的サイト生成）対応
- 柔軟なルーティングとファイルベース構成
-
useFetchやuseAsyncDataなどの組み込みユーティリティ - デフォルトで TypeScript サポート（必要に応じて利用可能）
開発環境
開発環境は以下の通りです。
- Windows 11
- VSCode
- Nuxt 3.17.4
- Vue 3.5.14
- Node 22.16.0
- npm 11.4.1
Nuxt プロジェクトの作成
npm create nuxt nuxt-sample
cd nuxt-sample
npm run dev
http://localhost:3000 にアクセスすると、Nuxt 3 のウェルカム画面が表示されます。
上記画面は、app.vue のコードを表示しています。
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
TypeScript のサポートについて
Nuxt 3 はプロジェクト作成時から TypeScript が有効になっており、設定を変更せずに .ts ファイルや <script setup lang="ts"> を使用できます。
TypeScript を使うかどうかは任意ですが、型情報を活かすことで補完やエラー検出が強化され、開発効率が向上します。
ディレクトリ構造の概要
Nuxt のプロジェクトには、以下のように自動的に読み込まれる特別なディレクトリがあります。
| ディレクトリ | 説明 |
|---|---|
pages/ |
ルーティングに対応するページを定義 |
components/ |
UI部品を定義。自動インポートされる |
layouts/ |
各ページで共通して使うレイアウト |
app.vue |
アプリケーション全体のルート |
ページの作成
Nuxt は Next.js と同じくファイルベースのルーティングです。pages/ ディレクトリに Vue ファイルを作成すると、自動的にルーティングが設定されます。
なお、app.vue を利用する場合、app.vue で <NuxtPage /> を利用する必要があります。
利用しない場合、pages/ ディレクトリに Vue ファイルを作成するだけで、ルーティング設定ができます。
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtPage />
</div>
</template>
ファイルを作ると、/about にアクセスできます。
<template>
<div>
<h1>About</h1>
<p>This is the about page.</p>
</div>
</template>
コンポーネントの作成と読み込み
共通パーツ（ヘッダーなど）は components/ ディレクトリに配置して再利用できます。
<template>
<header>
<h1>Nuxt Sample</h1>
</header>
</template>
<template>
<div>
<NuxtRouteAnnouncer />
<AppHeader />
<NuxtPage />
</div>
</template>
ディレクトリ構成と PascalCase
components/ 以下にサブディレクトリを作っても、自動的に名前解決されます。
components/
└── ui/
└── Card.vue
この場合、コンポーネントは <UiCard> として使用できます。
<template>
<div class="card">
<slot />
</div>
</template>
<style scoped>
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
background-color: #fff;
}
</style>
レイアウトの作成
共通のレイアウトを定義するには layouts/ ディレクトリを使用します。
また、レイアウト機能を正しく機能させるには、ルートの app.vue に <NuxtLayout> を配置する必要があります。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
デフォルトレイアウト
layouts/default.vue は、全ページに適用される「標準レイアウト」です。特にページごとに指定しなければ、このレイアウトが自動的に使われます。
<template>
<div>
<AppHeader />
<main><slot /></main>
</div>
</template>
このファイルは全ページへ適用されるデフォルトレイアウトになります。
カスタムレイアウト
特定のページで独自レイアウトを使いたい場合は、新たな .vue ファイルを作成します。
layouts/
├── default.vue
└── blog.vue
<template>
<div class="blog-layout">
<aside>Blog Menu</aside>
<main><slot /></main>
</div>
</template>
ページ側で definePageMeta を使ってレイアウト名を指定すると、カスタムレイアウトを適用できます。
<script setup>
definePageMeta({
layout: "blog",
});
</script>
<template>
<h2>Blog articles</h2>
</template>
外部データの取得
Nuxt では useFetch を使って簡単に API からデータを取得できます。
<template>
<div>
<h1>Posts</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script setup>
const { data: posts } = await useFetch('https://jsonplaceholder.typicode.com/posts')
</script>
非同期データの取得もシンプルな記述で実現できます。
まとめ
Nuxt 3 は Vue 3 をベースにした強力なフレームワークで、SSR や SSG、ファイルベースルーティング、柔軟なレイアウト構成、組み込みのデータ取得機能など、モダンな Web アプリケーション開発を強力にサポートしてくれます。
この記事では、Nuxt プロジェクトの作成からページ・コンポーネント・レイアウトの使い方、外部データの取得方法まで、基本的な流れを一通り紹介しました。
参照
関連記事