はじめに
先日パブリックベータに移行したNuxt 3では、コードの軽量化、高速化やTypeScriptサポートなど様々な変更や新機能が盛り込まれているようです。
今回はそんなNuxt 3の新機能、変更点について紹介します。
Nuxt 3の特徴
公式サイトで挙げられている特徴（対応予定を含む）は下記の通りです。
- 最大で75倍の軽量化
- Nitro Engineによる高速化
- ISG（インクリメンタル・スタティック・ジェネレーション）などの高度なモードへの対応予定
- ナビゲーションの前後を問わず、どのコンポーネントでもデータを取得可
- Composition APIのネイティブサポート
- Nuxt CLI登場
- Nuxt Devtools登場予定
- Webpack 5に対応
- Vitaに対応
- Vue 3のネイティブサポート
- TypeScriptのネイティブサポート
新しいサーバエンジン（Nitro Engine）が登場
Nuxtの新しいサーバエンジンとしてNitoro Engineが登場しました。これにより、大幅な軽量化（公式曰く、最大75倍）と高速化が実現されているようです。
さらに、Nitro EngineによりNuxt内部でのAPIの作成が行えるようになりました。これについては後ほど紹介します。
Vue 3＆Composition APIのネイティブサポート
Nuxt 2でもパッケージを追加することで対応させることができましたが、Nuxt 3からは標準で使用できるようになりました。
TypeScriptのネイティブサポート
Nuxt 2でTypeScriptを使う場合、tsconfig等を自分でセットアップする必要がありましたが、Nuxt 3からはNuxt CLIでアプリケーションを作成すると、TypeScriptがそのまま利用できます。
Nuxt 3のディレクトリ階層
公式サイトにおけるNuxt 3のディレクトリ階層は下記のようになっています。
- .nuxt（Nuxtが生成するファイル）
- .output（本番アプリケーションのビルド先）
- assets（ビルドツールで処理されるアセット。SASS、Fontなど）
- components（Vueコンポーネント）
- composables（Stateを管理するファイル。自動インポートされる）
- layouts（レイアウト）
- nod_modules
- pages（各ページ）
- plugins（プラグインファイル。自動インポートされる）
- public（faviconなどの静的ファイルなど）
- server（APIなどのバックエンドロジック）
- .gitignore
- app.vue
- nuxt.config.ts
- package.json
- tsconfig.json
Nuxt 3で追加されたメソッド
Nuxt 3では下記の3つのメソッドが追加されました。これらのメソッドはsetup関数内か、Lifecycle Hooks内で動作します。
- useAsyncData
- useFetch
- useState
useAsyncData
非同期に解決されるデータにアクセスできます。基本的にはNuxt内部で作成したAPIを呼ぶために使用されます。
| 1 2 3 4 5 6 7 8 9 10 | const { data: Ref<DataT>, pending: Ref<boolean>, refresh: (force?: boolean) => Promise<void>, error?: any } = useAsyncData( key: string, fn: () => Object, options?: { lazy: boolean, server: boolean } ) |
引数の内容は下記の通りです。
- key（データ取得がリクエスト間で適切に重複しないようにするための固有キー）
- fn（値を返す非同期関数）
- options
- lazy（ナビゲーションをブロックするのではなく、ルートをロードした後に非同期関数を解決するかどうか。デフォルトはfalse）
- default（非同期関数が解決する前に、データのデフォルト値を設定するファクトリ関数）
- server（サーバーサイドでデータを取得するかどうか。デフォルトはtrue）
- transform（解決後のfnの結果を変更するために使用できる関数）
- pick（fnの結果から、この配列の指定されたキーのみを取り出す）
戻り値の内容は下記のとおりです。
- data（非同期関数の結果）
- pending（データがまだフェッチされているかどうかを示すbool値）
- refresh（データの更新を強制的に行うために使用できる関数）
- error（データの取得に失敗した場合に返される）
使用例は下記のとおりです。
| 1 2 3 4 5 | let counter = 0 export default () => { counter++ return JSON.stringify(counter) } |
| 1 2 3 4 5 6 7 | <script setup> const { data } = await useAsyncData('count', () => $fetch('/api/count')) </script> <template> Page visits: {{ data }} </template> |
useFetch
ページ、コンポーネント、プラグインでは、useFetchを使用して任意のURLからデータをフェッチできます。基本的には外部APIを呼ぶために使用されます。
| 1 2 3 4 5 6 | const { data: Ref<DataT>, pending: Ref<boolean>, refresh: (force?: boolean) => Promise<void>, error?: any } = useFetch(url: string, options?) |
引数の内容は下記の通りです。
- url
- options
- method（リクエストメソッド）
- params（クエリパラメータ）
- baseURL（ベースURL）
戻り値の内容はuseAsyncDataを同じです。
使用例は下記のとおりです。
| 1 2 3 4 5 6 7 | <script setup> const { data } = await useFetch('/api/count') </script> <template> Page visits: {{ data.count }} </template> |
uesState
Nuxtでは、コンポーネント間でリアクティブでSSRに適した共有ステートを作成するためのuseStateコンポーザブルを提供しています。
これにより、Vuexを使わなくてもStateの管理ができるようになります。
| 1 | useState<T>(key: string, init?: () => T): Ref<T> |
- key（データ取得がリクエスト間で適切に重複しないようにするためのユニークなキー）
- init（ステートが開始されていないときに初期値を提供する関数）
- T
使用例は下記のとおりです。
| 1 2 | export const useCounter = () => useState<number>('counter', () => 0) export const useColor = () => useState<string>('color', () => 'pink') |
| 1 2 3 4 5 6 7 | <script setup> const color = useColor() // Same as useState('color') </script> <template> <p>Current color: {{ color }}</p> </template> |
さいごに
Nuxt 3（ベータ版）での新機能や変更点を紹介しました。軽量化や速度改善に加えて、TypeScriptに対応されたのが良い点だとおもいます。
おすすめ書籍
