Nuxt 3での変更点について

業務でNuxtを使っていますが、使用しているバージョンは2系です。

なので最新バージョンであるNuxt 3について変更点など調べてみました。

デフォルトでTypeScriptをサポート

一番大きいのはこれじゃないでしょうか。

これまでReactに比べてTypeScriptとの相性はイマイチ、という声もちらほら聞かれたVueでしたが、Next.js vs Nuxt.jsという構図でも同様だったかと思います。

しかしNuxt 3ではデフォルトでTypeScriptをフルサポートしています。設定ファイルもnuxt.config.tsとなります。

なのでNuxt使いたいけどTypeScript使いたいからNextかな、となっていた方にとってはNuxtを選択する十分な理由になりうると思います。

JSX / TSXもサポート

JSX / TSXJavaScript (TypeScript)の中でHTMLタグが使えるよう拡張した構文のことです。

たとえば、Reactの例ではこんな感じ。

const sampleComponent = () => {
  return <p>Hello, world!</p>
}

これもReactのイメージが圧倒的に強いですが、Nuxt 3ではこちらもフルサポートしました。

ただ、個人的にはそこまで嬉しいポイントでは無いというのが正直なところです。

以前少しだけReactの勉強をしたことがありましたが、JSXの独特の癖みたいなものがあまり好みではありませんでした。

Vite

Nuxt 3ではビルドツールにViteを採用しています。

ViteはVueを開発したEvan You氏が新たに開発したツールで従来に比べてビルド時間がかなり高速になるようです。

サーバーの立ち上げは勿論、開発中のHot Reloadも高速になる為、快適に開発を進められるはず。

Viteの存在は知っていたのですがまだ試せていなかった為、これは個人的にかなり気になる点です。

Vuexが含まれていない

Nuxt 2ではVuexが最初からパッケージに含まれていましたが、Nuxt 3では外れました。

じゃあStore的なものを使いたい時はどうすれば?と思ったのですが、useState()という関数を使うと可能なようです。

が、そもそもNuxt 3以前にVueのComposition APIを使ったことがないのでまずはそこからですね。。

あと関係ないですがuseStateと聞くとどうしてもReactのuseStateと混同してしまいそうです。

まとめ

以上、簡単にではありますがNuxt 3で変わった点について書いてみました。

今回調べてみて俄然使ってみたいと思ったので近々何かしら作ってみようと思います。