😇
すぐ始めるNuxt3
🎉🎉🎉🎉🎉 祝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 とありました。
というわけで、該当のバージョンを指定して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
おｋ
Nuxt v3をインストール
docに従いインストールします。
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.
おｋ
起動してみましょう！
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)
へろーわーるど！！！！！
あれ？？？画像が・・・
![Something went wrong]()
おやおやおやおや
というわけでzennにきました。 ごめんねQiita
ここまで書いてたのに・・・・
まぁいいや。
はい！改めてへろーわーるど〜〜〜！！！
🎉🎉🎉
まとめ
Nuxt v3をがんばっていくぞ！もっと盛り上がれ
Discussion