Новый Composition API

Путем миграции с @nuxtjs/composition-api на API, совместимое с Nuxt 3, количество необходимого переписывания кода при миграции на Nuxt 3 будет минимальным.

ssrRef и shallowSsrRef

Эти две функции были заменены на новый композабл, работающий похожим образом внутри: useState.

Основные отличия заключаются в том, что вы должны предоставить key для этого состояния (который Nuxt генерировал автоматически для ssrRef и shallowSsrRef), и что она может быть вызвана только внутри плагина Nuxt 3 (который определяется с помощью defineNuxtPlugin) или экземпляра компонента. (То есть вы не можете использовать useState с глобальным/окружающим контекстом, потому что существует опасность общего состояния между запросами.)

- import { ssrRef } from '@nuxtjs/composition-api'

- const ref1 = ssrRef('initialData')
- const ref2 = ssrRef(() => 'factory function')
+ const ref1 = useState('ref1-key', () => 'initialData')
+ const ref2 = useState('ref2-key', () => 'factory function')
  // accessing the state
  console.log(ref1.value)

Поскольку состояние задается ключом, вы можете получить доступ к одному и тому же состоянию из нескольких мест, если используете один и тот же ключ.

Вы можете прочитать подробнее о том, как использовать этот композабл, в документации.

ssrPromise

Эта функция была удалена, и вам потребуется найти альтернативную реализацию, если вы ее использовали. Если у вас есть случай использования ssrPromise, пожалуйста, сообщите нам об этом через обсуждение.

onGlobalSetup

Эта функция была удалена, но ее случаи использования могут быть решены путем использования useNuxtApp или useState внутри defineNuxtPlugin. Вы также можете запускать любой настраиваемый код внутри функции setup() лейаута.

- import { onGlobalSetup } from '@nuxtjs/composition-api'

- export default () => {
-   onGlobalSetup(() => {
+ export default defineNuxtPlugin((nuxtApp) => {
+   nuxtApp.hook('vue:setup', () => {
      // ...
    })
- }
+ })

useStore

Для доступа к экземпляру хранилища Vuex вы можете использовать: useNuxtApp().$store.

- import { useStore } from '@nuxtjs/composition-api`
+ const { $store } = useNuxtApp()

useContext и withContext

Вы можете получить доступ к внедренным хелперам с помощью: useNuxtApp.

- import { useContext } from '@nuxtjs/composition-api`
+ const { $axios } = useNuxtApp()

wrapProperty

Этот хелппер больше не предоставляется, но вы можете заменить ее следующим кодом:

const wrapProperty = (property, makeComputed = true) => () => {
  const vm = getCurrentInstance().proxy
  return makeComputed ? computed(() => vm[property]) : vm[property]
}

useAsync и useFetch

Эти два композабла можно заменить на useLazyAsyncData и useLazyFetch, которые документированы в документации Nuxt 3. Подобно предыдущим композаблам @nuxtjs/composition-api, они не блокируют навигацию по маршрутам на клиенте (отсюда и 'lazy', как часть имени).

Миграция на новые композаблы с useAsync:

<script setup>
- import { useAsync } from '@nuxtjs/composition-api'
- const posts = useAsync(() => $fetch('/api/posts'))
+ const { data: posts } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts } = useLazyFetch('/api/posts')
</script>

Миграция на новые композаблы с useFetch:

<script setup>
- import { useFetch } from '@nuxtjs/composition-api'
- const posts = ref([])
- const { fetch } = useFetch(() => { posts.value = await $fetch('/api/posts') })
+ const { data: posts, refresh } = useLazyAsyncData('posts', () => $fetch('/api/posts'))
+ // or, more simply!
+ const { data: posts, refresh } = useLazyFetch('/api/posts')
  function updatePosts() {
-   return fetch()
+   return refresh()
  }
</script>

useMeta

Для взаимодействия с vue-meta вы можете использовать useNuxt2Meta, который будет работать в Nuxt Bridge (но не в Nuxt 3) и позволит вам манипулировать вашими мета-тегами в соответствии с vue-meta.

<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
  useNuxt2Meta({
    title: 'Мое приложение Nuxt',
  })
</script>

Вы также можете передавать computed значения или refs, и мета-значения будут обновляться реактивно:

<script setup>
const title = ref('мой заголовок')
useNuxt2Meta({
  title,
})
title.value = 'новый заголовок'
</script>

Nuxt Bridge также предоставляет реализацию мета-тегов, совместимую с Nuxt 3, которую можно получить с помощью композабла useHead.

<script setup>
- import { useMeta } from '@nuxtjs/composition-api'
  useHead({
    title: 'Мое приложение Nuxt',
  })
</script>

Вам также необходимо явно включить его в вашем nuxt.config:

import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
  bridge: {
    meta: true
  }
})

Этот композабл useHead использует @unhead/vue внутри (а не vue-meta) для манипулирования вашим <head>. Соответственно, рекомендуется не использовать одновременно нативные свойства head() Nuxt 2 и useHead, так как они могут конфликтовать.

Для получения дополнительной информации о том, как использовать этот композабл, см. документацию Nuxt 3.

Явные импорты

Nuxt предоставляет доступ к каждому автоматическому импорту с помощью псевдонима #imports, который можно использовать для явного импорта при необходимости:

<script setup lang="ts">
import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Отключение автоматического импорта

Если вы хотите отключить автоматический импорт композаблов и утилит, вы можете установить imports.autoImport в false в файле nuxt.config.

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

Это полностью отключит автоимпорт, но все еще будет возможно использовать явные импорты из #imports.