【Nuxt 3 beta】ページを追加して表示する

新規に作成したプロジェクトにページを追加して表示します。

NuxtではVue Routerが自動的にインストールされます。さらに追加したページに対しても自動的にルーティング制御が行われます。

pages/ディレクトリを作成する

Nuxtプロジェクトのルートディレクトリにpages/ディレクトリを作成します。
pages/ディレクトリ配下に作成したファイルに対して、自動的にルーティング制御が行われます。

pages/ディレクトリの追加

pages/ディレクトの配下にindex.vueというファイル名の簡単なVue.jsファイルを配置してみます。

pages
<script>
export default {
  data: () => {
    return {
      message: 'Hello Nuxt!'
    }
  }
}
</script>
<template>
  <div>
    {{message}}
  </div>
</template>
<style>
</style>

しかし、この状態でhttp://localhost:3000にアクセスすると404エラーが表示されるはずです。

app.vueでNuxtPageコンポーネントを使用する

Nuxt3ではpages/ディレクトリはオプション扱いのため、ルーティングを必要としないページでは必要ありません。

app.vueをそのまま使用することによって、最小限のディレクトリ構成でアプリケーションを作成することができます。

pages/ディレクトリを作成して、独自のページを作成する場合にはapp.vueの修正が必要になります。

app.vueを以下のように修正します。

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

<NuxtWelcom>コンポーネントを<NuxtPage>コンポーネントに変更するとpages/ディレクトリ配下に作成したページを参照できるようになります。

NuxtNuxt3, Vue3

Posted by hoopoe