😇

すぐ始めるNuxt3

2022/12/03に公開

🎉🎉🎉🎉🎉 祝GA 🎉🎉🎉🎉🎉

長かった。今年の1月にNuxtデビューしましたが、Vue3に移ろうかとしたらNuxt3まだ!?ってなってたので、それからちょくちょく確認してましたが、一体いつになるんだとなっていました。

その後イベントがあって、またNuxtを触ることになったのですが(今年9月ぐらい)、そのときにリリースノートを確認したら11月だったので、まだ!????と再度なりました。

そしてついにリリースされました〜〜〜〜〜 🎉🎉🎉

ここまで書いてなんですが、あんまりNuxtに詳しくありません。

そしてアドベントカレンダー大遅刻です。本当にありがとうござい(ry

この記事は Nuxt Advent Calendar 2022 1 日目の記事です。

すぐ始めるNuxt3

さて、今回の利用する技術は下記になります。

  • Docker

以上です。

僕の環境はM1 Macになります。

Docker run

さて、Nuxtのdocを確認すると、nodeのバージョンは latest LTS version とありました。

https://nuxt.com/docs/getting-started/installation

というわけで、該当のバージョンを指定してpullしてrunしましょう。

$ docker run --rm --platform linux/arm64/v8 -it node:lts-slim /bin/bash

※私の環境はm1 macなので、platformを指定していますが、適宜外してください。

root@95ff51b4dbc9:/# node -v
v18.12.1
root@95ff51b4dbc9:/# npm -v
8.19.2

おk

Nuxt v3をインストール

docに従いインストールします。

https://nuxt.com/docs/getting-started/installation

root@95ff51b4dbc9:/# npx nuxi init aipa-thunder
Need to install the following packages:
  nuxi@3.0.0
Ok to proceed? (y) y
Nuxi 3.0.0                                                                                                                                                                                                  08:12:27

 ERROR  (node:32) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                                                                                      08:12:27
(Use `node --trace-warnings ...` to show where the warning was created)

✨ Nuxt project is created with v3 template. Next steps:                                                                                                                                                    08:12:29
 › cd ../aipa-thunder                                                                                                                                                                                       08:12:29
 › Install dependencies with npm install or yarn install or pnpm install                                                                                                                                    08:12:29
 › Start development server with npm run dev or yarn dev or pnpm run dev                                                                                                                                    08:12:29
npm notice
npm notice New major version of npm available! 8.19.2 -> 9.1.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.3
npm notice Run npm install -g npm@9.1.3 to update!
npm notice
root@95ff51b4dbc9:/#

ファっ!???

エラーかなと思いきや、読んだらWarningっぽいですね。

ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time

とりあえず一旦スルーします。

Nuxt v3を起動する

root@95ff51b4dbc9:# cd aipa-thunder/
root@95ff51b4dbc9:/aipa-thunder# yarn install

待ちます。

Nuxi 3.0.0                                                                                                                                                                                                  08:16:22
✔ Types generated in .nuxt                                                                                                                                                                                  08:16:23
Done in 53.50s.

おk

起動してみましょう!

root@95ff51b4dbc9:/aipa-thunder# yarn run dev
yarn run v1.22.19
$ nuxt dev

Nuxi 3.0.0                                                                                                                                                                                                  08:16:53
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                                                                                 08:16:53
                                                                                                                                                                                                            08:16:54
  > Local:    http://localhost:3000/
  > Network:  http://172.17.0.4:3000/

ℹ Vite client warmed up in 786ms                                                                                                                                                                            08:16:55
✔ Nitro built in 370 ms

やったぜ!!!!起動しました。

そして、コンテナのポートフォワードの設定忘れたからやり直しです。本当にありがとうござい(ry

やり直す

$ docker run --rm -w /app --platform linux/arm64/v8 -p 3000:3000 -it node:lts-slim /bin/bash
root@299eb9aadeba:/app# ls
root@299eb9aadeba:/app# npx nuxi init aipa-thunder
Need to install the following packages:
  nuxi@3.0.0
Ok to proceed? (y) y
Nuxi 3.0.0                                                                                                                                                                                                  08:19:23

 ERROR  (node:21) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                                                                                      08:19:23
(Use `node --trace-warnings ...` to show where the warning was created)

✨ Nuxt project is created with v3 template. Next steps:                                                                                                                                                    08:19:25
 › cd aipa-thunder                                                                                                                                                                                          08:19:25
 › Install dependencies with npm install or yarn install or pnpm install                                                                                                                                    08:19:25
 › Start development server with npm run dev or yarn dev or pnpm run dev                                                                                                                                    08:19:25
npm notice
npm notice New major version of npm available! 8.19.2 -> 9.1.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.3
npm notice Run npm install -g npm@9.1.3 to update!
npm notice
croot@299eb9aadeba:/app# cd aipa-thunder/
root@299eb9aadeba:/app/aipa-thunder# yarn install
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning nuxt > nitropack > rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
warning nuxt > @nuxt/vite-builder > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] Fetching packages...
warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
$ nuxt prepare
Nuxi 3.0.0                                                                                                                                                                                                  08:20:21
✔ Types generated in .nuxt                                                                                                                                                                                  08:20:22
Done in 52.41s.

それではいざ

$ yarn run dev

                                                                                                                                                                                                            08:20:46
Nuxi 3.0.0                                                                                                                                                                                                  08:20:46
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                                                                                 08:20:46
                                                                                                                                                                                                            08:20:47
  > Local:    http://localhost:3000/
  > Network:  http://172.17.0.2:3000/

ℹ Vite client warmed up in 849ms                                                                                                                                                                            08:20:48
✔ Nitro built in 358 ms                                                                                                                                                                               nitro 08:20:48
(node:108) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                                                                                             08:20:52
(Use `node --trace-warnings ...` to show where the warning was created)

http://localhost:3000/

Something went wrong

へろーわーるど!!!!!

あれ???画像が・・・

![Something went wrong]()

おやおやおやおや

というわけでzennにきました。 ごめんねQiita

ここまで書いてたのに・・・・

まぁいいや。

はい!改めてへろーわーるど〜〜〜!!!

🎉🎉🎉

まとめ

Nuxt v3をがんばっていくぞ!もっと盛り上がれ

Discussion