この記事をおすすめしたい人
- Nuxt3を始めようとしている人
- WindowsでNuxt3をやろうとしている人
- つまりオレ
Nuxt v3の調査、導入編です。
僕はずっとNAS上でNuxtを動かしていたんですが、
あれ、場所だけNASでWindows上から動かせばいいんじゃね？
と、とうとう気付いてしまってですね。 Nuxt3で遊びてーなーという思いがずっとあったので、Windows上でNuxt3を動かす方法を試していきます。
その他、ざっくりとしたNuxt2との相違点なんかを書いていきますよー。
このページの目次
まずはNode.jsをインストール
Microsoftサイトを参考に、Nuxt.jsを動かすためのNode.jsをインストールします。
まずはNodeのバージョン管理をするNVMというのをインストールします。 Releasesのページから最新版の「nvm-setup.exe」をダウンロードしてインストール。 NVMはあくまでバージョン管理をするだけなので、希望のNodeのバージョンがあったとしてもこの段階では最新版で問題ないです。
nvm-setup.exeを実行するとnvmのインストールフォルダとNodeのインストールフォルダが指定できます。 今後作るプロジェクトのフォルダとは関係ないのでデフォルトでよさそう。
次に、コマンドプロンプトでどこかテキトーに開き(本当にどこでもいい)、「nvm ls」でインストール済みのNodeのバージョンを確認します。 初回は何もないと思うので「No installations recognized.」と表示されるはず。
nvm ls
次に「nvm list available」コマンドを実行してインストール可能なNodeのバージョンを確認します。
nvm list available
Nuxt3の場合は公式にv18以上と記載があるので、まぁとりあえずv18の最新版とか、僕はそれにしました。 v20とかv22でも大丈夫だと思いますが、確か奇数系はコンセプトが違うとかだったはずなので、確認してからインストールした方がいいと思います。
バージョンが決まったら「nvm install 18.20.2」のように特定バージョンをインストール。
nvm install 18.20.2
インストールが終わったら使うバージョンを「nvm use 18.20.2」のように指定。
nvm use 18.20.2
「node -v」を実行すると使用中のNodeのバージョンが確認できます。
node -v
ここまででNuxt3で遊ぶ環境は整ったのでいったんコマンドプロンプトを閉じます。
Nuxt3のインストール
次はお待ちかねのNuxt3自体のインストールです。
Nuxtプロジェクトをインストールするフォルダに移動(C:\nuxtなど)して右クリックでターミナルを開きます。 開けない場合はコマンドプロンプトを開いて「cd c:\nuxt」などで移動。
プロジェクト名を「v3-test」として、この場所からインストールすると「C:\nuxt\v3-test」にインストールされるので、階層構造が自分の希望通りになるように実行場所を調整してください。
インストールは「npx nuxi@latest init v3-test」のように実行。 すると「v3-test」フォルダが作られてそこにインストールされます。
npx nuxi@latest init v3-test
インストール時のオプションは今回実行した範囲だと、
- Ok to proceed? (y)
インストールしていいですか？OKならyボタンを押す - インストールに何を使うか聞かれたので好きなものを選ぶ
僕はよく分からんのでnpmを選択 - Gitどうすんのか聞かれるので入力
- Are you interested in participating?
その前の説明文を読むと「開発用に匿名でデータ収集していいか」って意味っぽい。いいならYes、ダメならNo。
この4つだけでした。 v2に比べてだいぶ少ない。 というかNuxtの動作に関する質問がほとんどなかったです。
あとはnpmのバージョンが新しいのあるよって言ってきてたので「npm install -g npm@10.8.0」を実行しました。 必要でなければしない方がいいかも。今回はテストだったので従います。
npm install -g npm@10.8.0
インストールが終わったら「cd v3-test」でプロジェクトフォルダに移動して、
cd v3-test
「v3-test」の部分はプロジェクト名に置き換えてください。 コマンドでの移動が面倒ならコマンドプロンプトを閉じて目的のフォルダで開き直してもいいです。
あとはv2と同じく「npm run dev」で実行されます。
npm run dev
静的出力の場合はbuildからのgenerateなのも同じ。
しばらくするとURLが「http://localhost:3000/」のように表示されるのでブラウザにそれを貼ればアクセスできます。 Windowsセキュリティでアクセスを許可するか、みたいなのも聞かれたのでもちろん許可。
デフォルトページが表示されればここまではOK。
ざっと触ってみた感じの感想
起動はね、けっこう遅くなってますね。
これはNuxt3のせいかはちょっと分からなくて、うちの開発環境が変わったせいなのかもしれないです。 10Gbpsでつないでるとは言えNAS上なのでレスポンスが悪いのかも。
それなのにね、
書き換えに対する反応がクソはええ！
nuxt.config.jsとか根っこの部分を変更すると従来通りにけっこう時間かかるんですが、
あ、句点付け忘れてた。
なんでマル付けるだけでそんなに時間かかるねん！！
みたいなのがなくなってます。 ページの変更だと1秒かからないくらい。
これがViteとかいうのの恩恵なのかしら。 これは恐ろしく素晴らしい変更点だと思います。
デフォルトがTypeScriptになった
インストール時にJavaScriptかTypeScriptかを選ぶ選択肢がなくなっていて、デフォがTypeScriptになっています。 一応JavaScriptで書けなくもないみたいですが、オプションで簡単にON/OFFしたりはできないみたいです。
nuxt.config.jsもnuxt.config.tsと、拡張子がTypeScript仕様になっていてびっくりしました。
Nuxt公式のサンプルがTypeScriptばっかりになっているので、これを機にTypeScriptに移行した方が良さそう。 TypeScriptだからと強制されるのは型指定しないといけないくらいで、今のところそんなに影響ないです。
どうにかJavaScriptのままでやろうとする方が学習コストが高そうと判断したので僕はTypeScriptにいきますよ。
TypeScriptは変数の型宣言が必要なJavaScript…みたいな理解でいいのかな。 なんかNuxt3上なら型推定も自動でやってくれるとかなんとか。
生成されるファイルとかフォルダの違い
v2とv3で生成されるファイルやフォルダが変わっているものがあったので変わっているものを中心に書きます。
変更されたフォルダ
public
v2で画像とかファヴィコンを置いていた「static」というフォルダが「public」という名前に変わっています。
一応nuxt.config内のdir＞publicやstaticで変更可能なようですがデフォルトは「public」に変わりました。 変える場合は公式のdirを見てください。
server
「server」がデフォルトで作られるように？なっています。 v2のころもあったっけ？
apiやらサーバプラグインを置く場所のようで、公式を見ると階層構造込みで自動インポートされるみたいです。 「/api/users」ならserverの中にapiというフォルダを作って、その中にusers.tsというファイルを置く、みたいな。
v3は自動読み込みできる代わりに雑にスクリプトを置けなくなっているので、場所に応じて対応する型で記述しないといけないみたいです。 apiだとdefineEventHandlerという型みたいなので詳しくは公式を見てください。
output
generateした時に出力されるファイル群のフォルダが「dist」から「.output」内の「public」に変更になりました。
コンフィグ見る感じ、変更不可かな？ generateにdirオプションがなくなってました。
生成ページが多いプロジェクトだと、サーバにNuxtプロジェクト自体をアップロードしてサーバ上で出力していたのですが、出力先が変更不可になるとこれができないですね。 どうしよう。
どうしたらいい？
components / layouts / pages
初期状態だと作られないですが「components」「layouts」「pages」なんかは自分で作ればv2と同じように使えるようです。
componentsが自動インポートに対応したようですが、v2の頃から自動インポートしてなかった？
modules / plugins
「modules」「plugins」nuxt.configに記載せずとも自動読み込みできるようになりました。 その代わりに「自分が勝手に作っていたJSファイル」みたいなのは受け付けてくれないようになり、ちゃんとv3のモジュールやプラグインの規則に従う必要があるみたいです。
モジュールはdefineNuxtModuleに、プラグインはdefineNuxtPluginの型通りに書かないといけない？
なので「自分が勝手に作っていたJSファイル」を置くフォルダはデフォで読み込み対応されていないフォルダ(libとかconfigとか)に置かないといけないっぽい。 v3の書き方に従うか、app.configとかコンポーザブルとか、近い機能のものがあるのでそちらで実装すればいいと思います。
変更・追加されたファイル
app.vue
ひとつしか使えないレイアウトみたいな感じで「app.vue」というファイルがプロジェクトルートに追加されるようになりました。
v2にあった「app.html」とは違って、headやbodyを直接さわれるような仕組みではないみたいです。 その代わりコンポーネントの展開ができるので「app.html」より優れた点もありそう。
app.vue＞レイアウト＞ページの順に読み込まれるようで、app.vueやレイアウトはあってもなくてもいいみたい。 レイアウトが複数ないならこいつをレイアウト代わりにしてもいいかも。
詳細は次に書きます。
nuxt.config.ts
「nuxt.config.js」が「nuxt.config.ts」に変更されました。
jsバージョンでも動くことは確認しましたが、Nuxt全体が「TypeScript使えええ」と圧をかけてくるのでこれを機にTypeScriptになれようと思います。
中身はデフォルト状態だとかなり簡素化されています。
他はv2と同じかな？
HTMLを構成する階層構造が変わった
先ほどのapp.vueとかの話です。 フル状態だと以下の順に階層を作るようです。
- app.vue
- layouts/default.vue
- pages/index.vue
Nuxt2に比べて1階層増えてます。
それぞれに名前でIDを付けてHTMLを出力すると以下のようになりました。
<body>
<div id="__nuxt">
<div id="app">
<div id="layouts-default">
<div id="pages-index">
</div>
</div>
</div>
</div>
</body>
idが「__nuxt」の階層は自動で出力されて、他のは階層順です。
「pages/index.vue」だけにするとこの↓ようになります。
<body>
<div id="__nuxt">
<div id="pages-index">
</div>
</div>
</body>
管理の都合でappもレイアウトも不要な場合はこれでいいですね。
app.vueの書き方
デフォルトだとこう↓なので、
<template>
<div>
<NuxtWelcome />
</div>
</template>
最低限ページを参照するようにこう↓書き換えます。
<template>
<div>
<NuxtPage />
</div>
</template>
ヘッダやフッタ、サイドバーなど共通部分がない場合はそもそもapp.vueを削除してしまうのもありでしょう。
レイアウトを使う場合はこの↓ように書くみたいです。
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
思うところありますが、後で書きます。
レイアウトの書き方
app.vueありで上のように書いた場合はこの↓ように書くみたいです。
<template>
<div>
<header>header</header>
<slot />
<footer>footer</footer>
</div>
</template>
v2では見なかったslotというのが出て来ます。
これたぶんなんですけど、app.vue側↓でNuxtLayoutコンポーネントの内側にNuxtPageが置いてあるんですけど、
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
カスタムコンポーネントの内側に置いた内容を展開するタグなんじゃないかなって。
自前でコンポーネント書くときにpropsじゃなくてこの書き方したいなと思うことがけっこうあったので、もしそういう機能だったのならちょっと歓喜。
試したら追記します。そういう機能でした。でもNuxt2の頃からあったみたい。
従来通りの考え方で、app.vueをこんな↓感じに、
<template>
<div>
<NuxtLayout />
</div>
</template>
レイアウトをこんな↓感じに書くのもちゃんと機能していました。
<template>
<div>
<header>header</header>
<NuxtPage />
<footer>footer</footer>
</div>
</template>
その他の気付いた変更点
大きなものから小さなものまで、気付いたら書き足していこうと思います。
nuxt.config.jsの書き方の違い
上にも書きましたが、nuxt.config.jsがTypeScriptの書き方になりました。 型が付くくらいで大きな違いはないです。
それ以外には普通に使うならheadがapp内のheadに移動して、buildModulesがmodulesに統合されたとか、それくらいかな？
細かなbuildとかhooksとか触るようなケースだとだいぶ変わっていそうです。 buildはよくわかんねーです。 hooksは自分に必要な範囲で調べました。
注意が必要そうなモジュール
いくつかのモジュールで従来通りに使えないものがありました。 モジュールの名前が変わっているものや、そもそもの書き方が変わっているもの、Nuxt3になって不要になったものなどがあります。
さらにAMPやPWAのモジュールは全く使えなくなっています。 AMPについては自前で実装できないか実験しています。 やってやれなくはなさそう。
PWAは自前で移植できそう。 そこまでいってないのでまだ試してないです。
コンポーネントのscriptの書き方がめっちゃ変わった
従来式のOptions APIというものからComposition APIというものに変わりました。
もうイヤになるくらい激変しています。
ただ、従来式に近い形でも書けるようなので、僕は現状コッチ派です。
trailingSlashがなくなった
いやいや、コレなくなるとかある！？
従来のnuxt.config.jsにあったtrailingSlashがなくなっています。
自前で実装してみましたが、まだ実戦投入できていないので十分な動作かは不明。
injectの代用品を3つ紹介
Nuxt2でinjectやVue.mixinでやっていたグローバル変数のやり方が変わっています。 どのタイミングで呼び出せるかとかも挙動が異なるようで、けっこうややこしいです。
代用品の中のコンポーザブルというのがかなり面白い機能で、呼び出しタイミングの問題でもけっこう有用なので慣れていった方がよさそう。
v-forとv-ifの併用ができなくなった
Nuxt2の時にもv-forとv-ifの併用に何か推奨事項があった気がしますが、Nuxt3では物理的に併用不可になっています。
厳密にはv-ifが先に参照されるので、v-forの方の行の中身を参照できないです。 代替案を紹介しています。
axiosの代用品(useFetch、$fetch、useAsyncData)
ウェブAPIにアクセスするaxiosが非推奨？みたいです。
代用品や本当にaxiosが使えないのかなどを調べています。
まとめ
まだまだ乗換え途中で、乗換えを諦めたプロジェクトもありますが、Nuxt3の変更点・注意点なんかを気付いた順に書いていこうと思います。
以上、WordPressからお届けしました！
Nuxt.js v3の目次
- 第1回 インストール方法とかフォルダ構成の違いとか(このページ)
- 第2回 nuxt.config.jsの書き方の違い
- 第3回 注意が必要そうなモジュール
- 第4回 コンポーネントのscriptの書き方がめっちゃ変わった
- 第5回 trailingSlashに手動で対応
- 第6回 injectの代用品を3つ紹介
- 第7回 v-forとv-ifの併用の代替案
- 第8回 defineNuxtComponentは救世主！
- 第9回 composablesがめっちゃ強いかもしれない
- 第10回 手動でAMPに対応する
- 第11回 フック一覧を簡単に調べた
- 第12回 axiosの代用品(useFetch、$fetch、useAsyncData)