Q: Nuxt のプロジェクトでは全てのページを .vue ファイルで作らなくちゃいけないの？

A：いいえ、Nuxtの恩恵が不要なら HTMLで作成・設置しても大丈夫です。
こちらのページ は .vue ファイルではなく、HTML ファイルで作成されています。
ペライチのページなど、どうしても HTMLファイルにする必要がある場合は、 src/public ディレクトリ以下に HTMLファイルを配置することで、ページとして表示することが出来ます。
src/public/page-of-public/index.html の存在を確認して下さい。

ただし、よほどのことがない限り、.vue ファイルで作成することをお勧めします。
なぜなら、ルーティングが src/pages と src/public に分散されることで、 ややこしくなりメンテナンス性が下がるからです。

静的ファイルについては こちら⧉ も参照下さい。

Q: 画像などの静的ファイルはどうすれば良いの？

A：同様に src/public ディレクトリ以下に配置して下さい。
src/public/img/Lux.jpg の存在を確認して下さい。

Q: /common_img もローカルに用意しなきゃいけないの？

A：いいえ。/common_img の画像はプロキシで DEVサーバから取得表示します。
そこらへんの詳細は こちら⧉ を参照して下さい。

↓こちらは、common_img の画像を proxy で取得・表示してます。


💡Tips
ただし、プロキシを使う /common_img の画像を表示するには、 v-bind で指定しないとそのプロキシは効かないので注意する❗

こう書く
<img
  :src="TEST_COMMON_IMG_PATH"
  alt="nose.jpg"
  width="300"
>

Component は、部品的に要素を切り出して再利用するための仕組みです。
このコンポーネントは、props で受け取った classData を使ってスタイリングしています。

↓親コンポーネントから受け取った props の内容↓

{
  "classData": {
    "summary": "cursor-pointer text-xl px-3 py-2",
    "details": "mb-2 bg-white p-2",
    "p": "mb-2 px-3 py-2",
    "link": "text-blue-700 underline hover:text-purple-700",
    "code": "bg-gray-200 p-2"
  }
}

このように要素を分割することで、コードの再利用性が向上するほか、メンテナンス性も向上します。
コンポーネントについて⧉ も参考にして下さい。

ここのコンポーネントは src/components/sample/CompComponent.vue です。

ページは、「src/pages」ディレクトリにファイルを作成すればルーティングされ、 そのファイルがページとして認識されます。
ページの作成について⧉ に詳しく記載していますので、参考にしてください。

レイアウト⧉ は、ヘッダーやフッターなどの共通部分を切り出して再利用するための仕組みです。
複数作成してページごとに切り替えることが可能です。 例えば、ログインページにはヘッダーやフッターを表示しないようにするなどが可能です。

現在の NUXT_TMP では、このページと /about では、別のレイアウト使ってますので、ご確認下さい。

ここのコンポーネントは src/components/sample/PagesLayoutsComponent.vue です。

Nuxt では、何かしらのエラーが発生した場合のエラーページを設定することがが出来ます。

例えば、404 ページが存在しないページにアクセスした場合などです。
👉 存在しないページにアクセスしてみる
↑で表示されるページは、src/error.vue を経由して src/components/error/404Component.vue が表示されてます。

また、任意のタイミングでエラーを発生させることも可能です。
👉 エラーを発生させるページに行く
実際のエラー発生は、src/pages/error-test/index.vue のファイルを確認して下さい。

Nuxt のリンクには、通常の <a/> タグとは別に、 <NuxtLink /> とというコンポーネントが用意されています。
これを使うと、 <a> タグと違いページ移動時にブラウザの全体のリロードが発生しません。
これにより、ページ遷移時のネットワーク通信が減りパフォーマンスが向上したり、 遷移時にアニメを適用したりすることが可能になります。

詳細は 公式 NuxtLink ⧉ を参照してください。

ちなみに、このページの右上の「 About 」は <NuxtLink /> で、 一番右にある「 static page Html 」は <a /> タグでリンクしています。

ここのコンポーネントは src/components/sample/LinkComponent.vue です。

まずは、Vue3（Nuxt3 のベースとなるフレームワーク）の基本である ref() についてを、このページで簡単に説明します。
「src/pages/index.vue」を開いてコードを確認してください。
クリックしたら文字が変わるよ→ 🍖お肉
仕組みは↓こんな感じです。

const change = ref(false); で、変数をリアクティブにしています

次に button に @click="change = !change" と、クリックした時に change の値を反転させる処理を追加しています。

最後に {{ change? '💩うんこ' : '🍖お肉' }} の部分で、change の値によって表示する文字が変わるようになってます。

このように、ref() を使うことで、変数をリアクティブにすることができます。

ref() はNuxt で開発する上での「基礎」となるので、しっかりと理解しておきましょう。 ref() について⧉ も参照下さい。

ここのコンポーネントは src/components/sample/RefComponent.vue です。

composable は Vue3 で導入されたカスタムフックのようなものです。 ロジックを切り分けて、再利用性を高めることができます。

これら2つのコンポーネントは全く同じ処理をしてますが、 左側は直接コンポーネント内で処理して、右側はその処理を composable に切り分けています。

それぞれのコンポーネントを見比べてみてください。
どちらも同じ結果を返しますが、コードの見通しや再利用性を考えると composable を使う方が良いのが分かります。

👉 Composable については Nuxt3 でのページ作成の流れ の Composable の項目を参照してください。