💡 リリース候補は、安定版としてリリースされる可能性を秘めたベータ版です。つまり、安定版としてリリースされるまでは、大きな破壊的な変更は行われない予定です。

Nuxt 3 ベータは、Vue 3 、Vite そして Nitro をベースとした新しい基盤の導入して、16ヶ月の作業の末2021年10月12日 にリリースされました。

本日、6ヶ月後、私たちは “Mount Hope“ というコードネームで最初の Nuxt 3 リリース候補版 (release candidate) を発表したことを嬉しく思います。🚀

ベータから、私たちは 1000 以上のマージされたプルリクエスト 、900 以上の issues の対応、2000 以上のコミット 、そして Nuxtが 3600 以上のオープンソースリポジトリ で使われているのを見てきました。

Nuxt コアチームだけでなく、160 以上の貢献者 が私たちを助けてくれました。そして、ベータテスターによる素晴らしい採用を見ることができ、感謝しています。6ヶ月で 5000 以上の stars そして 340k 以上のダウンロード を達成しました。

もし、Nuxt 3 の以前のバージョンから移行する場合は、リリースノート をチェックできます。

新しい基盤

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 体験を得られるようにします。

さらに、もし希望するならば、npx nuxi typecheck コマンドを実行すると、Nuxt アプリケーションの中で手動で型をチェックすることができます。

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

Vite & Webpack

私たちは、Vite を Nuxt アプリケーションのデフォルトバンドラーとすることに決めました。私たちは、Evan You が Vue 3 で行った作業の大ファンです。そして、素晴らしい Vite コミュニティ が行った作業を見て、これに賭けることは簡単な選択でした。

同様に、Webpack のサポートを維持することは、私たちにとって重要です。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 の両方とより統合する一環として、unplugin も作成しました。これはビルドツールのための統一プラグインシステムで、Rollup、Vite、Webpack で動作するユニバーサルプラグインを記述できるようにするものです。

私たちは、Nuxt をビルダーに依存しないフレームワークとするための基礎を築き、JavaScript の永久に進化し続けるエコシステムに対応できるよう準備しています。

パフォーマンスに関するさらなる注意点: 私たちは vite-node と Webpack lazyCompilation を推進しており、Nuxt アプリケーションのサーババンドルにオンデマンドのバンドルをもたらしています。アプリケーションがどんなに大きくなっても、Nuxt は常に数秒で起動します。

Nitro & UnJS

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

なぜ Nitro?

Nuxt 2 の最初のペインポイントは、堅牢なサーバー統合ができないことでした。serverMiddleware はありましたが、開発者の体験は素晴らしいものではありませんでした。エイリアスサポートがなく、不安定だったのです。

次に、本番サーバーが lambda 環境での動作に最適化されておらず、起動時間が遅く、インストールサイズも大きかったことです。

Nitro は、Nuxt をさらにレベルアップさせる多機能を備えています:

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

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

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

統一された JavaScript ツール

2018年、私たちは unjs/consola や unjs/ipx など、再利用可能でフレームワークに依存しない JavaScript ライブラリの作成を開始しました。これらのライブラリは、JS エコシステム全体に利益をもたらすために、小さく、よくテストされ、互いに互換性を持っています。今日、私たちは、UnJS と呼ばれる新しい GitHub organization により大きなコレクションを持っています。この organization は、Node.js、Deno、ブラウザ、Worker を含むあらゆるJavaScript 環境で動作するのに適した ESM フレンドリー な JavaScript ツールのセットを提供するために作られました。

4年以上かけてこの土台を作り、Nuxt をどこでも動かすようにし、我々の想像を超えるアイデアを探求しています！

Nuxt 3 を動かすすべてのパッケージは https://github.com/unjs をご覧ください。

強力な機能

File System Automation

Pages

すべては pages ディレクトリから始まりました。すべてのファイルはルートにマッピングされています。Vue チームが vue-router で行った素晴らしい作業のおかげで、私たちはフロントエンドフレームワークのエコシステムの中で、動的でネストされたルートをサポートする最初の存在となりました。

pages ディレクトリ はそのままで、ダイナミックルート の構文が改良され、1つのルートに複数のパラメータを設定できるようになりました。さらに、pages ディレクトリはオプションです! app.vue ファイルだけでプロジェクトを開始でき、Nuxt は代わりに最小限のユニバーサルルータを使用してバンドルサイズを最適化します（28kB の節約、標準で 21% 小さくなります）。

詳しくは、pages のマイグレーションガイド をご覧ください。

Plugins

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

Components

components ディレクトリ はもう一つの芸術作品です。中のすべてのコンポーネントはテンプレートで利用可能で、インポートは必要ありません。Nuxt はあなたのコードを分析し、最終的なバンドルに使用するコンポーネントのみを含めることで、優れた開発者体験と実運用でのパフォーマンスの両方を実現します。

Composables

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

Public

static ディレクトリは public に名前を変え、すべての生ファイル (favicon.ico や robots.txt など) を提供するようになりました。

Server

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

Modules

Nuxt はモジュールを作成するための強力な API を公開しています。モジュールは、開発モードで nuxt を起動するとき、または本番用にプロジェクトを構築するときに順番に実行されるコードの断片です。モジュールによって、プロジェクトに不要な定型文を追加することなく、カスタムソリューションをカプセル化し、テストし、npm パッケージとして共有することができます。これらは、Nuxt builder のライフサイクルイベントにフックしたり、ランタイムアプリのテンプレートを提供したり、設定を更新したり、ニーズに応じて他のカスタムアクションを実行したりすることができます。

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

モジュール作者向けのガイド 、Nuxt 3 対応モジュール をご覧ください。

Thank You

issues、discussions、ブログ記事、ビデオ、Nuxt モジュールなど、様々な形でコミュニティが役立っていることに日々感心しています 💚

もし、まだ試してなく、あなたがサポートして場合は、以下のリンクをご覧ください:

• Discord に参加する
• Twitter をフォローする
• GitHub で Nuxt 3 を star する

これは、Nuxt の新しい章の始まりです。新しい Nuxt 3 プロジェクトを開始する 時です。