Nuxt3でpagesフォルダのルーティングが正しく行えないときの解消法

#プログラム #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はNuxt3で新規プロジェクトを作成し、自身で作成を行う「pages」フォルダ内の「index.vue」ファイルが表示されない場合の解消法について記載していきます。

新規でプロジェクトを作成した際に陥りやすい内容なので、是非ご覧ください。

事前準備

初めに検証を行うために、新規でNuxt3のプロジェクトの作成を行っていきます。作成方法は下記記事で紹介しておりますので、参考にしてください。
噂のVue.jsベースのフレームワーク！ Nuxt3入門《新規プロジェクトの作成》

Nuxt2では自動で生成されていた「pages」フォルダが、Nuxt3では自動で作成されないため自身で作成する必要があります。今回は、検証に必要なフォルダのみを抜粋し、作成を行っていきます。

抜粋したフォルダ以外に必要なものについては、下記記事をご確認ください。
Vue.jsベースのフレームワーク！ Nuxt3入門《フォルダ階層説明》

フォルダ階層

検証にあたり、ルート直下に新規で下記フォルダの作成をしていきます。今回必要となるのは「pages」で、この「pages」を作成することで直下のフォルダやファイルがルーティングとしてURLから見れるようになります。

pages: pages ディレクトリには、アプリケーションのビューとルートが格納されています。
Nuxt はこのディレクトリ内のすべての .vue ファイルを読み込んで、ルーターの設定を自動的に作成します。

index.vueの作成

「pages」フォルダの下に「sample」フォルダを作成します。作成した「sample」フォルダの中に「index.vue」ファイルを作成します。

作成後「index.vue」をテキストエディタで開き、下記内容を記載し保存を行います。

index.vue

<template>
  <div>
    <h1>Hello Nuxt3</h1>
  </div>
</template>

これで、ルーティン後に表示するページの準備が完了しました。

ルーティングの確認

ここまでの準備ができたら、実際の検証を行っていきます。まずは、プロジェクトの実行を行います。

– プロジェクトの実行

実行後「http://localhost:3000/sample」のURLをたたいてみます。

– 遷移結果

「sample」フォルダの直下にある「index.vue」を参照してほしいところですが、実際はNuxtのWelcomeページに遷移をしてしまっています。これではルーティングが正しく行えていませんので、修正していきます。

ルーティングの修正

正しくルーティングするために、下記「app.vue」ファイルの修正を行っていきます。

– app.vue修正前

<template>
  <div>
    <NuxtWelcome />　← ここの記載を修正
  </div>
</template>

– app.vue修正後

<template>
  <div>
    <NuxtPage />　← ここの記載を修正
  </div>
</template>

コマンドで作成したサンプルプロジェクトでは、「app.vue」のデフォルトの遷移先が「NuxtWelcome」となっており、これによりすべてWelcomeページへと飛ばされていました。

修正したら、「http://localhost:3000/sample」の遷移先を再度確認してみます。

– 修正後実行結果