Nuxt3のインストールからルーティングの導入までのメモ

Vueを活用する中で、

「Nuxt」

のフレームワークを使用して、

各種APIを作成するなど、

小さな規模から試そうと考え、

公式サイトを見ながら、

導入して起動するまでを試した。

今回は、

Laravelのフロントエンド部分で、

Vue.jsを使っていたのだが、

それを分離するために、

Nuxtのバージョンについても、

バージョン2系ではなく、

バージョン3系を導入して、

Nuxtを使っていこうとしたので、

その際にやったことを、

個人的にメモを残しておく。

参考サイト(公式サイト)

こちらのサイトを参考にしました。

リンクをメモ。

Nuxt3の導入のコマンド

公式サイトの通りに、

順番にコマンドを実行していく。

導入コマンド

npx nuxi init sample-project

実行結果

$ npx nuxi init sample-project
Nuxi 3.4.2                                                            10:34:27
✨ Nuxt project is created with v3 template. Next steps:              10:34:27
 › cd sample-project                                                  10:34:27
[10:34:27]  › Install dependencies with npm install or yarn install or pnpm install
[10:34:27]  › Start development server with npm run dev or yarn dev or pnpm run dev

実行すると、

上記のように、

Nuxi 3.4.2

とバージョン3系が導入されていますね。

コマンドの処理が終わって、

✨ Nuxt project is created with v3 template. Next steps:

とあるので、

cd sample-project

で対象フォルダに入って、

次の初期設定と起動を試します。

プロジェクトの初期設定と起動

先ほどの

cd sample-project

でサンプルプロジェクトに入って、

NPMで必要なライブラリをインストールします。

コマンド

npm install

コマンド実行結果

$ npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

> postinstall
> nuxt prepare

Nuxi 3.4.2                                                            10:41:08
✔ Types generated in .nuxt                                            10:41:09

added 622 packages, and audited 623 packages in 1m

104 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

こちらで導入完了。

Nuxtを起動して、初期表示を確認

起動コマンド

npm run dev

コマンド結果

$ npm run dev
Nuxi 3.4.2                                                            10:43:34
Nuxt 3.4.2 with Nitro 2.3.3                                           10:43:34
                                                                      10:43:34
  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.3:3000/
  > Network:  http://[2400:4152:6182:bb00:55bc:9eea:77f3:aa8c]:3000/
  > Network:  http://[2400:4152:6182:bb00:70b1:af09:8412:646a]:3000/
  > Network:  http://[2400:4152:6182:bb00:9154:eec:ff2d:8b6f]:3000/
  > Network:  http://[2400:4152:6182:bb00:9d4d:b3f:eb6b:e273]:3000/
  > Network:  http://[2400:4152:6182:bb00:a:b8ef:ffba:a32d]:3000/
  > Network:  http://[2400:4152:6182:bb00:fc76:ad1f:8e7:a4ba]:3000/

ℹ Vite client warmed up in 499ms                                      10:43:35
✔ Nitro built in 236 ms                                         nitro 10:43:35

上記のコマンドで、

うまく起動でき、

表示用のURLについても、

「Local」で表示されているので、

そちらで表示確認していきます。

表示確認URL

http://localhost:3000/

表示確認結果

こちらが表示され、

うまく起動できていますね。

ルーティングの導入

初期表示としては、

プロジェクト内の

こちらの、

app.vue

が初期表示として、

表示されるページになっています。

個人的に、

元のシステムから、

ページを持ってきて調整する際に、

ルーティングとして

/folder1/sample_first
/folder2/sample_second

という形のルーティングにしたいので、

vue-router

を導入します。

公式サイトは、

こちらを参照してください。

実際に導入を進めていきます。

Vue-Routerの導入コマンド

コマンド

npm install vue-router@4

コマンド結果

$ npm install vue-router@4

up to date, audited 623 packages in 2s

104 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

こちらで、

導入できたので、

実際にページのルーティングを試します。

Nuxtでルーティングを試す

プロジェクト内に

/pages

のフォルダを作って、

index.vue

を作ります。

トップページのルーティング

ファイル

/pages/index.vue

コード

<template>
  <h1>Index page</h1>
</template>

また、

初期設定のファイルについても調整します。

初期ファイルの調整

ファイル

app.vue

コード

<template>
  <div>
    <!-- Markup shared across all pages, ex: NavBar -->
    <NuxtPage />
  </div>
</template>

画面表示確認

このルーティング設定で、

実際の初期ページの確認を行います。

確認URL

http://localhost:3000/

確認結果

うまく表示できていますね。

これでうまくルーティングを使ったページが作れそうです。

ここまでの部分でも、

初心者の方の参考になれば幸いです。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

スポンサー

人気記事

おすすめ記事