経緯
先ほどNuxt3がbetaではあるが公開され、どんなものか早速プロジェクトを作成してみたので、そのやり方と感想を記載します。
Nuxt3?
NuxtはVue.jsのフレームワークです。サーバーサイドレンダリング、静的なHTMLの出力などの機能など、Vue.jsで開発をスムーズに行うことが出来る機能が備わっています。
これまではVue2しか対応していませんでしたが、このNuxt3でVue3に対応しました。
Nuxt3の機能、何が変わったのか？
ざっくりとサイトに目を通して、個人的に興味を持ったところを抜粋して紹介します。
Vue3の対応
もちろんVue3への対応が一番大きいと思います。Vue3のコードから大幅に書きなおすことなく、Vue3の機能を使用できるようです。
Nuxt Bridge
既存のnuxt2で作成されたプロジェクトをアップグレードするNuxt Bridgeがあるみたいです。
また、現状ではNuxt3で新しくプロジェクトを作成するよりかは安定しているそうです。
Viteのサポート
サーバーの起動など(npm run dev)が一瞬になります。
パフォーマンスの向上
どれくらい変わったかは未検証ですが、パフォーマンス的にはNuxt3 > Nuxt Bridge > Nuxt2になるみたいです。
プロジェクトを作成してみる
公式ドキュメントのとおりに進めてみます。
npx nuxi init nuxt3-app
cd nuxt3-app
npm install
上記のあと、次のコマンドを実行してサーバーを起動させます。
npm run dev
起動はたった1~2秒で終わりました。ブラウザhttp://localhost:3000にアクセスします。
このようなページが表示されました。
ディレクトリ構造
上記で作成したプロジェクトのディレクトリ構造は以下のとおりになっていました。
第一印象としては、標準がTypeScriptとなっているのと、とても構造がコンパクトになっていると感じます。
現段階では、components、pages、layoutなどの様々なディレクトリは自分で作成する必要があるようです。用意できる各ディレクトリはこちらに記載されています。
まとめ
まだベータ版なので、今後どのようにアップデートがされるか楽しみです。ドキュメントも作成途中だと思いますが、まだ読み切れていないのでこれから読んでみようかなと思います。
情報の更新があれば、記事も更新するかもしれません。