月: 2022年10月

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モードなるものがリリースされており、バージョンを上げたところ無事解決しました。 https://github.com/nuxt/framework/discussions/7513 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 とは段違いに速いと感じます。 https://nitro.unjs.io/ 自動インポート Nuxt3では、CompositionAPIのsetupで使用する関数のインポートを追加する必要はなく、エンジンによって自動的にインポートされます。また、ディレクトリとファイル名で自動的にComponentもインポートされます。 components インポートしたい Vue コンポーネントを配置するディレクトリ composables 各コンポーネントを記入しなくても、Composables ディレクトリを使って自動的にインポートできる ネスト化されたコンポーネント ネスト化されたディレクトリにコンポーネントがある場合は、パス・ディレクトリのコンポーネントの名前を指定するだけで使用できます。 例えば、components/bar/foo.vue の場合、以下のようになります。 [crayon-67169c40b60ee812609356/] アトミックデザインでディレクトリを分けてファイルを作成する際は&lt;AtomButton&gt;みたいな感じになりそうですね。ちょっと冗長になりそうな気もしています。

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