Nuxt3 pagesの表示方法（環境構築からHello Worldまで）

概要

Nuxtを起動し、画面にHello Worldを表示させるまでの手順になります。

補足

画面であるVueのviewsディレクトリはNuxtではpagesディレクトリに相当します。
ルーティングを設定する際、Vueではrouter/index.jsに記載する必要がありましたが、Nuxtではpagesにファイルを作成すると、自動でルーティングも設定されます。

環境構築

※windowsのpowershellで行っています。

まずはNode.jsバージョン18以上がインストールされているか確認

node -v

# v20.17.0などが表示されればok

Nuxt.jsをインストール(今回はバージョン3.14)

npx nuxi@3.14 init my-nuxt-project

プロジェクトディレクトリに移動し、開発サーバー起動、表示されたURLをブラウザで開きます。

cd my-nuxt-project
npm run dev

コード修正

まずは、pagesディレクトリを作成し、testsディレクトリにHelloWorldコンポーネントを作成します。

./pages/tests/HelloWorld.vue

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

次に、pages配下にindex.vueを作成し、HelloWorldコンポーネントを読み込み、表示させます。

./pages/index.vue

<script setup>
import HellowWorld from "./tests/HellowWorld.vue";
</script>

<template>
  <p>テストです。</p>
  <HellowWorld />
</template>

最後に、ルートディレクトリのapp.vueに、<RouterView />をラップした<NuxtPage />を記載し、pages/index.vueを表示させます。

./app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

以下のような画面が表示されるはずです。

注意点

<NuxtPage />

を使う場合は、pages/index.vueを作成する必要があります。