NuxtとVueを使用して簡易的なアプリを作成してみる#1

環境構築～シンプルな初期画面の表示

準備

Nuxtアプリを新規作成

npx nuxi init nuxt-learning

ディレクトリ移動して必要なパッケージをインストール

cd nuxt-learning

npm install

アプリ起動（開発モード）

npm run dev

一応説明
npm run xxx の xxxの部分が下記と対応
今回はdevなので "nuxt dev"が実行される（他はbuild以外知らない；；）

package.json(一部)

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

アプリ起動後に http://localhost:3000/ にアクセスすると下記テンプレート画面が表示される。

ページ作成

Nuxtは pages/ ディレクトリの中に .vue ファイルを置くと、自動でルーティング（URLとの対応）してくれます。

初期はpagesディレクトリがないのでルートディレクトリに作成する必要があります（柔軟な構成ができるように作られてないらしい）。

ということでpages/ディレクトリに適当に作成。

🤖GPT様🤖
「Nuxt では、pages/ フォルダに置かれた .vue ファイルの名前と構造がそのまま URL になるという仕組みを採用しています。
この仕組みを「ファイルベースルーティング」と呼びます。」

なるほどなぁ・・・。

ということで http://localhost:3000/top にアクセス→初期画面のまま
調べるとホットリロード（変更があれば随時更新）はディレクトリの新規作成時は動かないっぽい

再度アプリを起動して→http://localhost:3000/top にアクセス→初期画面のまま

再度調査・・・。
どうやらapp.vueが下記のようになっていると、常にNuxtWelcomeコンポーネント（Nuxtの初期デモ画面）しか表示されず、pages/ にどれだけ .vue ファイルを作っても表示されないらしい。

app.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

仕組み

🤖GPT様🤖
「Nuxt 3 のルーティングは app.vue の中にある に表示されます。
はあくまで「初期表示用の仮コンポーネント」なので、開発が始まったら 削除か非表示にする必要があります。」

とのことなので下記のように修正

app.vue

<template>
  <NuxtPage />
</template>

うーん、シンプル。

そして再度ページにアクセスすると、一面真っ白な画面
コンソールを確認すると、このような表示が

 WARN  Create a Vue component in the pages/ directory to enable <NuxtPage>  

現時点ではnuxt-learning/app/app.vueという構造になっているが、下記のようにpagesと同じ階層にapp.vueを置かないとだめらしい。その構造にしたのは私じゃないので他人が悪いということにしておく。

nuxt-learning
├── app.vue
├── pages/
│ ├── index.vue
│ └── top.vue
├── package.json

とにかくディレクトリ構造を修正して再起動すると、今度はようやくうまくいった。こんなシンプルなページを表示するのにどんだけかかるんだよという話ではある。

index.vue

<template>
  <div>
    <h1>これはトップページです</h1>
    <NuxtLink to="/next">次ページへ移動</NuxtLink>
  </div>
</template>

next.vue

<template>
  <div>
    <h1>Nextページ</h1>
    <p>これは次ページです。</p>
  </div>
</template>

いったんこんな感じで今回は終了。
次回以降はレイアウトをいじったりなんやかんやしていく予定。

次回：https://qiita.com/Dye-Chan/items/9aeefea601fb4a43dd2a

参考

npx, nuxi initなど
https://qiita.com/kohta9521/items/ee3ed4a2360add80ad79
https://zenn.dev/comm_vue_nuxt/articles/start-nuxt-cli
https://kamoqq.info/post/nuxt-command-is-an-alias-for-nuxi-command/

npm install, package.jsonなど
https://qiita.com/4649rixxxz/items/0c904da64dd53af7fb7d
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

偉大なる空に輝く白頭山の星にしてAI様
https://chatgpt.com/