Nuxt 3 のベータ版が安定版に突入！Nuxt 3 実装経験のあるエンジニアが最新の Nuxt 3 アップデート内容をまとめます😎

こんにちは！

本記事では今フロントエンド界隈で話題の Nuxt 3 リリース候補版を紹介いたします！ Nuxt / Vue で開発を行なっている方は必見です。

想定する読者

• Nuxt / Vue で開発を行なっているヒト
• Nuxt3  ベータを使っているヒト
• Nuxt3 のアップデート情報が気になるヒト

はじめに

2022年4月20日に Nuxt 3 リリース候補版が発表されました。本記事では、Nuxt 3 リリース候補版の内容について詳しく解説していきたいと思います。

その前に、以前リリースされた Nuxt 3 ベータを簡単に見ておきましょう。

Nuxt 3 ベータは、16ヵ月の作業を経て Vue 3・Vite・Nitro をベースとした新機能を導入し、2021年10月12日にリリースされました。

このベータは3,600以上のオープンソースリポジトリで使用されているだけではなく、リリース以来1,000以上のプルリクエストが統合されたり、900以上の問題が解決されたり、2,000以上のコミットが生まれたりもしています。

また、ベータの注目度の高さは以下の実績からも見て取れます。

• 160以上のコントリビューター
• 5,000以上のお気に入り
• 34万以上のダウンロード

Nuxt 3 リリース候補版の内容

では、Nuxt 3 リリース候補版について詳しく見ていきましょう。Nuxt 3 リリース候補版には、新機能が3つと、改善された機能が2つあります。

新機能

Vue 3 & TypeScript

Vue 3 は 3ヵ月前から新しいデフォルトになり、より良いパフォーマンス・Composition API・TypeScript のサポートを行いました。Nuxt 3 はこれらの改善点をもとに、最高の SSR サポートで素晴らしい Vue 3 体験を提供します。

Nuxt 3 は TypeScript で書き直されているため、完全に型付けされ、コーディング時に正確な型情報へアクセスできるように便利なショートカットが提供されています。

さらに、Nuxt は TS config (.nuxt/tsconfig.json) とグローバルな型定義ファイル (.nuxt/nuxt.d.ts) を自動的に生成するため、設定せずとも完全な TypeScript 開発ができます。

それだけではなく、Nuxt アプリケーション内において手動で型をチェックする npx nuxi typecheck コマンドを実行できます。つまり、必要に応じてビルドや開発の型検査さえ有効にできるのです。

より詳細な内容は Nuxt 3 での TypeScript を参照ください。

Vite & Webpack

Vite が Nuxt アプリケーションのデフォルトバンドラーになりました。また、Webpack は成熟したビルドツールで、Nuxt 2 プロジェクトへの移行を容易にしてくれます。つまり、Nuxt 3 が公式に Vite と Webpack の両方をサポートしているということです。

Webpack 5 を使用するために、Nuxt config で有効にし、@nuxt/webpack-builder をインストールしてください

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  builder: 'webpack' // default: 'vite'
})

Vite と Webpack の両方とより統合させる一環として、unjs/unplugin も作成されました。これはビルドツールのための統一されたプラグインシステムで、Rollup・Vite・Webpack で動作するユニバーサルのプラグインを記述できるようにするものです。

そして Nuxt をビルダーに依存しないフレームワークにするための基盤を構築し、JavaScript の永続的に発展し続けるエコシステムに対応できるように備えられています。

また、vite-node と Webpack lazyCompilation を推進して Nuxt アプリケーションのサーババンドルにオンデマンドのバンドルを持ってくることで、アプリケーションがどれだけ大きくなっても Nuxt は常に数秒で起動できます。

Nitro & UnJS

Nuxt 3 の大きな特徴の1つは、新しいサーバーエンジン UnJS/Nitro によって、Nuxt がプロバイダに依存しない強力なフルスタックフレームワークとなったことです。

Nitro 導入の背景になった Nuxt 2 のペインポイントは大きく2つありました。

1つ目は、堅固なサーバー統合の欠如です。erverMiddleware はありましたが、エイリアスのサポートがなく不安定だったため、開発者体験は素晴らしいものとは言えませんでした。

2つ目は、本番サーバーが lambda 環境での動作に最適化されていなかったことです。起動に時間がかかり、インストールサイズも大きくなっていました。

このような背景から今回導入した Nitro は、Nuxt をさらにレベルアップさせる多機能を備えています。

• server/ ディレクトリ のためのホットモジュール
• pages/ ディレクトリと同様のファイルシステムを持つサーバールート
• node_modules に依存しないポータブルでコンパクトなデプロイメント
• 内蔵クローラーによるルートキャッシングと静的プリレンダリング
• 高速なサーバー起動時間のためのコード分割と非同期チャンクローディング

Nitro の導入により、Nuxt 3 とプロジェクトで使用するすべてのものが新しい devDependencies になりました。Nitro がコードを分割してすべてをポータブルでコンパクトな .output ディレクトリにバンドルし、どのホスティングプロバイダにもデプロイできる状態にします。

その様子を紹介する動画をご覧ください。

また、2018年に NuxtJS は unjs/consola や unjs/ipx など、再利用可能でフレームワークに依存しない JavaScript ライブラリの作成を始めました。これらのライブラリは、JS エコシステム全体の利益となるために、小さく、十分にテストされ、それぞれ互換性を持っています。

そして今では、UnJS という新しい GitHub organization 内で、より大きなコレクションになっています。この organization は、Node.js・Deno・ブラウザ・Worker を含むあらゆる JavaScript 環境で動作するのに適した ESM を扱いやすい JavaScript ツールのセットを提供するために作られました。

4年以上かけてこの基盤で開発に取り組むことで、着実に Nuxt をどこでも動作できるようにし、Git 上で創意工夫され続けています。

改善された機能

ファイルシステムの自動化

Pages

Pages ディレクトリ はそのままで、動的ルート の構文が改善され、1つのルートに複数のパラメータを設定できるようになりました。

さらに、pages ディレクトリはオプションです。app.vue ファイルだけでプロジェクトを始められ、Nuxt は最適化されたバンドルサイズのために、代わりに最小限のユニバーサルルータを使用します（28kB の節約、標準で 21% 小さくなります）。

プラグイン

プラグインディレクトリにあるすべてのファイルは、メインのコンポーネント (app.vue) を作成する前に自動的にインポート・実行されます。

コンポーネント

もう1つの優れた機能がコンポーネントディレクトリです。ディレクトリ内のすべてのコンポーネントはインポートせずにテンプレートで利用できます。

Nuxt はコードを分析し、最終的なバンドルに使用するコンポーネントのみを含めることで、優れた開発環境および本番環境のパフォーマンスを実現します。

Composable

Vue 3 と Composition API のおかげで、アプリケーションに Vue の Composable を自動的にインポートする新しい Composable ディレクトリが作成されました。

パブリック

static ディレクトリは名前をパブリックに変え、すべての RAWファイル (favicon.ico や robots.txt など) を提供するようになっています。

サーバー

最後に、新しいサーバーディレクトリは、Vue アプリケーションにサーバールートとバックエンドロジックを追加するための強力な機能を備えました。

モジュール構文の改善

Nuxt Kit のおかげで、より良いデフォルト、型付け、Nuxt バージョン間の互換性が得られるように、モジュールのシンタックスを改善できました。

Nuxt Kit とは Nuxt 内部とのインタラクションを非常に簡単にするためのユーティリティのセットです。

まとめ

今回は、先日発表された Nuxt 3 リリース候補版について紹介しました！

Nuxt 3 ベータに新機能が追加されたり、機能が改善されたりしたことで、優れた開発環境・本番環境のパフォーマンスが実現されています。

そしてリリース候補版ということで、安定版としてリリースされるまで大きな変更は行われない予定です。Nuxt / Vue で開発を行なっている方はぜひ Nuxt 3 リリース候補版での開発を検討してみてはいかがでしょうか。

Nuxt 3 リリース候補版に関する開発相談は、お気軽にお問い合わせください。

またこのブログでは、AWS 関連の記事をどんどん公開しております。ご興味のある方はぜひ他の記事もご覧ください！