Vue Academy · レッスン

Nuxt 3のプロジェクト構成とファイルベースルーティング

pages/、layouts/、components/の自動インポート、ネストしたルートのファイル命名、キャッチオールルート

レッスン 1/413 ステップ

「Nuxt 3のプロジェクト構成とファイルベースルーティング」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

Nuxt 3 とは

Nuxt 3 は Vue 3 を基盤とするメタフレームワークです。サーバーサイドレンダリング、ファイルベースルーティング、自動インポート、サーバーエンジンを追加し、ほとんど設定せずにフルスタックの Vue アプリを構築できます。

pages ディレクトリ

pages/ ディレクトリがルーティングを担います。各 .vue ファイルが自動的にルートになるため、手動でルーターを設定する必要はありません。pages/about.vue は /about に対応します。

pages/
  index.vue      ->  /
  about.vue      ->  /about
  contact.vue    ->  /contact

ルーターを有効にする

pages/ ディレクトリが存在すると、ルーターは自動的に有効になります。マッチしたページを描画するには、app.vue に <NuxtPage /> を追加してください。

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

ネストしたルート

フォルダーによってパスをネストできます。pages/blog/index.vue は /blog を、pages/blog/archive.vue は /blog/archive を提供します。

pages/
  blog/
    index.vue    ->  /blog
    archive.vue  ->  /blog/archive

[id] による動的セグメント

ファイル名を角括弧で囲むと、dynamic segment を定義できます。pages/users/[id].vue は /users/42 にマッチし、id をルートパラメーターとして公開します。

// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"

[...slug] によるキャッチオール

スプレッド形式の [...slug].vue は catch-all です。パスの深さにかかわらずマッチするため、CMS のコンテンツやカスタム 404 処理に適しています。

pages/
  [...slug].vue  ->  /a, /a/b, /a/b/c ...

layouts ディレクトリ

layouts/ フォルダーには、ページ間で共有するラッパーコンポーネントを配置します。ヘッダー、サイドバー、フッターなどが該当します。layouts/default.vue は、別のレイアウトを指定しない限り、すべてのページをラップします。

<!-- layouts/default.vue -->
<template>
  <header>My Site</header>
  <slot />
</template>

レイアウトを選択する

ページでは definePageMeta を使ってレイアウトを選択します。レイアウト内のスロットにページのコンテンツが描画されます。

<script setup>
definePageMeta({ layout: 'admin' })
</script>

コンポーネントの自動インポート

components/ 内のものはすべて auto-imported になるため、import 文は必要ありません。ネストしたフォルダーは名前に接頭辞を付けます。components/base/Button.vue は <BaseButton /> になります。

components/
  TheHeader.vue   ->  <TheHeader />
  base/Button.vue ->  <BaseButton />

Composable の自動インポート

composables/ ディレクトリも自動インポートされます。そこからエクスポートされた関数や、useFetch のような Nuxt 組み込み機能は、インポートなしでどこからでも使用できます。

// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importing

その他の主要なディレクトリ

Nuxt には、plugins/（起動時に実行）、middleware/（ルートガード）、server/（API とサーバーロジック）、public/（そのまま配信する静的アセット）も用意されています。

確認問題

Nuxt の構成とルーティングに関する知識を確認しましょう。

対話的なレッスンで答える

まとめ

Nuxt の構成について学びました。

pages/ がファイルベースルーティングを提供し、フォルダーによってルートをネストできます。
[id] は動的セグメント、[...slug] はキャッチオールです。
layouts/ がページをラップし、definePageMeta で選択できます。
components/ と composables/ は自動インポートされます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「Nuxt 3のプロジェクト構成とファイルベースルーティング」レッスンは無料ですか？

はい。「Nuxt 3のプロジェクト構成とファイルベースルーティング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Nuxt 3のプロジェクト構成とファイルベースルーティング」で何を学びますか？

pages/、layouts/、components/の自動インポート、ネストしたルートのファイル命名、キャッチオールルートブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Nuxt 3のプロジェクト構成とファイルベースルーティング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る