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

asyncData と fetch

Nuxt 3は、APIからデータをフェッチするための新しいオプションを提供します。

アイソモーフィックFetch

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

Nuxt 3では、Fetch APIと同じAPIを持つグローバルに利用可能な fetch メソッド、または$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

key

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>

layout

loading

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

middleware

scrollToTop

この機能はNuxt 3ではまだサポートされていません。 vue-router のデフォルトのスクロール動作を上書きする場合は、~/app/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>