Nuxt3でページ遷移する方法

はじめに

このページではNuxt3でページ遷移する方法を紹介します。

前提条件

• Huawei P10 Lite
• Android OS 7
• UserLAnd 3.1.8
• Ubuntu 22.04.2 LTS
• Nuxt 3.3.3

以下を参考にプロジェクトを作成しておいてください。

app.vueの修正

ページ遷移を機能させるためにapp.vueを以下のように修正します。

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <NuxtWelcome />
+    <NuxtPage />
   </div>
 </template>

ディレクトリの作成

Nuxt3ではpagesディレクトリがないので以下のコマンドを実行してディレクトリを作成します。

mkdir pages

ページの作成

以下のファイルをpagesディレクトリ直下に作成します。

pages/index.vue

<template>
  <NuxtLink to="/about">
    About
  </NuxtLink>
</template>

pages/about.vue

<template>
  <NuxtLink to="/">
    Index
  </NuxtLink>
</template>

アプリの起動

以下のコマンドを実行してNuxt3アプリを起動します。

yarn dev

エラーになる場合は以下のコマンドを実行してNuxt3アプリを起動します。

yarn build
node .output/server/index.mjs

リンクをクリックしてページ遷移を確認してみてください。

おわりに

Nuxt3でページ遷移する方法を紹介しました。