Nuxt3に乗り換えてみてどう変わったか簡単にまとめる

Nuxt3に乗り換えてみてどう変わったか簡単にまとめる

Nuxt.js

TypeScriptでフロント開発するにあたって、TypeScriptファーストなNuxt3を使いNuxt2からどう変わったのかなどを簡単にまとめてみました。

公式ドキュメント：https://v3.nuxtjs.org/

目次

Nuxt3でどう変わった

Nuxt3になったことで、JSX/TSXやSCSSの対応、APIサーバー作成などの機能がデフォルトで含まれています。Nuxt2もセットアップなしで開発を始められるフレームワークでしたが、TypeScriptやSCSSで書く場合は別途追加する必要がありました。

Nuxt3によってそれらが内包され素早いフロント開発に着手できるようになりました。

※ JSXはJavaScripでHTMLっぽいのが書けるようJavaScriptを拡張したものです。TSXはJSXのTypeScript版です。

サーバー起動とホットリロードが早い

Nuxt3は開発時のビルドツールにViteが採用されています。そのため開発時のサーバー起動とHMRが早くなりました。

これは実際に使ってみて早さを実感しており、これだけでもNuxt3に乗り換える価値がありそうです。

Composition APIの採用

Composition APIは関数ベースでコンポーネントを実装する機能です。関数ベースであるため機能の再利用性を高める役割を持っています。

Vueでの新しい書き方としてプラグインでVue 2にも先行提供されていたComposition APIはNuxt3では標準採用されています。

従来の記法であるOptions APIと比較してTypeScriptの相性がいいことが挙げられます。 Options APIにTypeScript を導入しても thisやdataなどのoptionsの定義が複雑であるため、型定義が難しかったのですが、Composition APIを使用することで型推論でき開発が効率的になりました。

状態管理としてuseStateとpiniaが追加

Vue3ではVuexに代わってuseStateとpiniaが推奨されています。

Nuxt 2では主要機能の1つとして組み込まれていたVuexですが、グローバルな状態管理ストアにアプリが依存するリスクやTypeScript、単体テストとの相性の悪さなどがVuexが推奨されなくなった背景とされています。

 

Nuxt3でプロジェクトを作成する

Nuxt3 からは create-nuxt-app の代わりにNuxt CLIでNuxtプロジェクトを作成します。

npx create-nuxt-appによる質問がなくなったため、すぐにプロジェクトを作成できます。Nuxt3ではTypeScriptはデフォルトになっており、TypeScriptファーストなフレームワークになりました。

Nuxt3では生成されるファイルが.tsで作られていることがわかります。

JSX・TSXを使うなら

JSX・TSXを使う場合は、tsconfig.jsonにcompilerOptionsを追記することが使用することができるようになります。