Nuxt3への移行作業時に気になったところをまとめてみた

Nuxt2で開発したWebサービスをNuxt3 RCに移行作業を行なっているので、その際に気になった機能などをまとめておきます。

公式ページ：https://v3.nuxtjs.org/

Nuxt2との違い

Nuxt3は、Vue3をベースになっています。Nuxt2との違いとしてSSRの高速化やバンドルサイズの縮小などのパフォーマンスの向上、Composition APIの導入、TypeScript サポートなどが挙げられます。

rc.3で開発していたのですが、SSGしてもクライアント側でデータフェッチしている挙動があり、どうにかならないかと悩んでいました。

Nuxt3のRC情報を見ていたら、SSG後にクライアント側で再フェッチしないFull SSGモードなるものがリリースされており、バージョンを上げたところ無事解決しました。

Nuxt3を構成するコアパッケージは以下のようになっています。

既存のNuxt 2プロジェクトからNuxt3の機能を使いたい場合はNuxt Bridge を使用するのが良さそうです。変更を最小限に抑えながら、ほとんどの新機能を試すことができます。

nitro(読み方はニトロじゃなくてナイトロ)の基盤は、rollupとh3で、高いパフォーマンスと移植性のために構築された最小限のhttpフレームワークです。特徴は以下の通りです。

様々なプラットフォームにも対応しているエンジンで、JavaScript をサポートする様々なシステムでデプロイできます。

サーバーレス環境でも動作します。

unjs/h3プロジェクトを使用し、h3という軽量のhttp サーバーが使われています。

設定しなくても自動的にコード分割してくれます。

プログラム実行中にコードを変更できます。

ページのレンダリングを細かくコントロールし、静的サイトとサーバーレスサイトでハイブリッドモードが使用可能です。

ローカル開発時のホットリロードの速度、CICD 上でのビルド実行速度が従来の WebPack とは段違いに速いと感じます。

Create web servers with everything you n…

nitro.unjs.io

Nuxt3では、CompositionAPIのsetupで使用する関数のインポートを追加する必要はなく、エンジンによって自動的にインポートされます。また、ディレクトリとファイル名で自動的にComponentもインポートされます。

インポートしたい Vue コンポーネントを配置するディレクトリ

各コンポーネントを記入しなくても、Composables ディレクトリを使って自動的にインポートできる

ネスト化されたディレクトリにコンポーネントがある場合は、パス・ディレクトリのコンポーネントの名前を指定するだけで使用できます。

例えば、components/bar/foo.vue の場合、以下のようになります。

<div>

</div>

</template>

アトミックデザインでディレクトリを分けてファイルを作成する際は<AtomButton>みたいな感じになりそうですね。ちょっと冗長になりそうな気もしています。