Опции компонентов

Миграция с опций компонентов Nuxt 2 на компосаблы Nuxt 3.

asyncData и fetch

В Nuxt 3 данные с API получают новыми способами.

Изоморфный fetch

В Nuxt 2 часто использовали @nuxtjs/axios, @nuxt/http или глобальный полифилл fetch.

В Nuxt 3 доступны глобальный fetch с API Fetch API или $fetch на базе unjs/ofetch. Преимущества:

  1. На сервере выполняет прямые вызовы API, на клиенте — запрос к вашему API (поддерживаются и сторонние API).
  2. Удобная обработка: авто-парсинг ответов и сериализация данных.

Подробнее: прямые вызовы API, получение данных.

Композаблы

В Nuxt 3 для получения данных используются useAsyncData и useFetch. Есть «ленивые» варианты (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">
// params — из defineProps(), useRoute() и т.д.
const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
// Или useFetch — обёртка над useAsyncData для простого запроса
const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
</script>

В шаблоне Nuxt 3 доступны post и вызов refresh() для обновления данных.

useFetch — не прямая замена хука fetch(). Оба хука заменяет useAsyncData; она гибче и подходит не только для запросов к одному endpoint. useFetch — удобная обёртка над useAsyncData для простого запроса.

Миграция

  1. Замените хук asyncData на useAsyncData или useFetch в странице/компоненте.
  2. Замените хук fetch на useAsyncData или useFetch.

head

Узнать больше Docs > 4 X > Migration > Meta.

key

Ключ задаётся в макросе definePageMeta.

app/pages/index.vue
- <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

Узнать больше Docs > 4 X > Migration > Pages And Layouts.

loading

В Nuxt 3 пока не поддерживается.

middleware

Узнать больше Docs > 4 X > Migration > Plugins And Middleware.

scrollToTop

В Nuxt 3 пока не поддерживается. Поведение скролла vue-router можно переопределить в ~/router.options.ts (см. документацию). Как и key, задаётся в макросе definePageMeta.

app/pages/index.vue
- <script>
- export default {
-   scrollToTop: false
- }
+ <script setup>
+ definePageMeta({
+   scrollToTop: false
+ })
</script>

transition

Узнать больше Docs > 4 X > Getting Started > Transitions.

validate

Хук validate в Nuxt 3 принимает один аргумент — route. Как и в Nuxt 2, можно вернуть boolean; при false и отсутствии другого совпадения будет 404. Можно вернуть объект с status/statusText для немедленного ответа с ошибкой (остальные маршруты не проверяются).

app/pages/users/[id].vue
- <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 не поддерживается. Используйте watcher для повторной загрузки данных.

app/pages/users/[id].vue
<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/user')
watch(() => route.query, () => refresh())
</script>