Nuxt 3（ベータ）の新機能を紹介

はじめに

先日パブリックベータに移行したNuxt 3では、コードの軽量化、高速化やTypeScriptサポートなど様々な変更や新機能が盛り込まれているようです。

今回はそんなNuxt 3の新機能、変更点について紹介します。

Nuxt 3の特徴

公式サイトで挙げられている特徴（対応予定を含む）は下記の通りです。

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を呼ぶために使用されます。

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（データの取得に失敗した場合に返される）

使用例は下記のとおりです。

let counter = 0
export default () => {
  counter++
  return JSON.stringify(counter)
}

<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>

<template>
  Page visits: {{ data }}
</template>

useFetch

ページ、コンポーネント、プラグインでは、useFetchを使用して任意のURLからデータをフェッチできます。基本的には外部APIを呼ぶために使用されます。

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を同じです。

使用例は下記のとおりです。

<script setup>
const { data } = await useFetch('/api/count')
</script>

<template>
  Page visits: {{ data.count }}
</template>

uesState

Nuxtでは、コンポーネント間でリアクティブでSSRに適した共有ステートを作成するためのuseStateコンポーザブルを提供しています。

これにより、Vuexを使わなくてもStateの管理ができるようになります。

useState<T>(key: string, init?: () => T): Ref<T>

• key（データ取得がリクエスト間で適切に重複しないようにするためのユニークなキー）
• init（ステートが開始されていないときに初期値を提供する関数）
• T

使用例は下記のとおりです。

export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')

<script setup>
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

さいごに

Nuxt 3（ベータ版）での新機能や変更点を紹介しました。軽量化や速度改善に加えて、TypeScriptに対応されたのが良い点だとおもいます。

おすすめ書籍