コンポーネントオプション

asyncData と fetch

Nuxt 3 では、API からデータを取得するための新しいオプションが提供されています。

アイソモーフィックフェッチ

Nuxt 2 では、データを取得するために @nuxtjs/axios または @nuxt/http を使用するか、ポリフィルされたグローバルな fetch を使用していたかもしれません。

Nuxt 3 では、グローバルに利用可能な fetch メソッドを使用できます。これはFetch API と同じ API を持ち、または、$fetch メソッドを使用します。これはunjs/ofetchを使用しています。これには多くの利点があり、以下が含まれます。

1. サーバー上で実行されている場合は「賢く」直接 API 呼び出しを行い、クライアント上で実行されている場合は API へのクライアントサイド呼び出しを行います。（サードパーティ API の呼び出しも処理できます。）
2. さらに、応答の自動解析やデータの文字列化など、便利な機能も備わっています。

直接 API 呼び出しについて、または データの取得について、さらに詳しく読むことができます。

コンポーザブル

Nuxt 3 はデータを取得するための新しいコンポーザブルを提供します: useAsyncData と useFetch です。これらにはそれぞれ「lazy」なバリアント（useLazyAsyncData と useLazyFetch）があり、クライアントサイドのナビゲーションをブロックしません。

Nuxt 2 では、次のような構文を使用してコンポーネント内でデータを取得していました。

export default {
  async asyncData ({ params, $http }) {
    const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post }
  },
  // or alternatively
  fetch () {
    this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
  },
}

メソッドとテンプレート内では、コンポーネントによって提供される他のデータと同様に、post 変数を使用できます。

Nuxt 3 では、setup() メソッドまたは <script setup> タグでコンポーザブルを使用してこのデータ取得を実行できます。

<script setup lang="ts">
// Define params wherever, through `defineProps()`, `useRoute()`, etc.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
// Or instead - useFetch is a convenience wrapper around useAsyncData when you're just performing a simple fetch
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

Nuxt 3 のテンプレート内で post を使用したり、refresh を呼び出してデータを更新したりできます。

移行

1. ページ/コンポーネントの asyncData フックを useAsyncData または useFetch に置き換えてください。
2. コンポーネントの fetch フックを useAsyncData または useFetch に置き換えてください。

head

キー

definePageMeta コンパイラマクロ内でキーを定義できるようになりました。

- <script>
- export default {
-   key: 'index'
-   // or a method
-   // key: route => route.fullPath
- }
+ <script setup>
+ definePageMeta({
+   key: 'index'
+   // or a method
+   // key: route => route.fullPath
+ })
</script>

レイアウト

loading

この機能は Nuxt 3 ではまだサポートされていません。

middleware

scrollToTop

この機能は Nuxt 3 ではまだサポートされていません。vue-router のデフォルトのスクロール動作を上書きしたい場合は、~/router.options.ts で行うことができます（詳細についてはドキュメントを参照してください）。key と同様に、definePageMeta コンパイラマクロ内で指定してください。

- <script>
- export default {
-   scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+   scrollToTop: false
+ })
</script>

transition

validate

Nuxt 3 の validate フックは、単一の引数 route のみを受け取ります。Nuxt 2 と同様に、真偽値を返すことができます。false を返し、他のマッチが見つからない場合は 404 となります。statusCode/statusMessage を含むオブジェクトを直接返すことで、エラーを即座に返すこともできます（他のマッチはチェックされません）。

- <script>
- export default {
-   async validate({ params }) {
-     return /^\d+$/.test(params.id)
-   }
- }
+ <script setup>
+ definePageMeta({
+   validate: async (route) => {
+     const nuxtApp = useNuxtApp()
+     return /^\d+$/.test(route.params.id)
+   }
+ })
  </script>

watchQuery

これは Nuxt 3 ではサポートされていません。代わりに、ウォッチャーを直接使用してデータの再取得をトリガーできます。

<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>