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

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

2022年10月12日
Vue.js

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

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

Nuxt2との違い

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

 

v3.0.0-rc.10でFull SSGモードに

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

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

 

Nuxt3のコアパッケージ

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

  • コアエンジン: nuxt
  • バンドラー: @nuxt/vite-builder and @nuxt/webpack-builder
  • コマンドライン: nuxi
  • サーバーエンジン: nitro
  • 開発キットt: @nuxt/kit
  • Nuxt 2ブリッジ: @nuxt/bridge

nuxt/bridge

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

nitro

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

クロスプラットフォームサポート

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

サーバーレスサポート

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

API routes

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

自動コード分割

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

ホットリロード

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

ハイブリッド・モード

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

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

Home | ⚗️ Nitro

Build and Deploy Universal JavaScript Se…
nitro.unjs.io

 

自動インポート

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

components

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

composables

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

 

ネスト化されたコンポーネント

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

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

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