Обзор

Сближение проекта с Nuxt 3 и снижение трудозатратов на миграцию.
Если вы начинаете новый проект на Nuxt 3, пропустите этот раздел и перейдите к установке и введению в Nuxt 3.
Nuxt Bridge даёт те же возможности, что и Nuxt 3 (см. документацию по автоимпортам), но есть ограничения: например, композаблы useAsyncData и useFetch недоступны. Подробности — ниже на этой странице.

Bridge — слой совместимости: многие возможности Nuxt 3 подключаются установкой и настройкой модуля.

С Bridge проект можно привести к состоянию «почти Nuxt 3» и переносить код поэтапно.

Первый шаг

Обновление Nuxt 2

Убедитесь, что ваш сервер разработки (nuxt dev) не работает, удалите любые lock-файлы пакетов (package-lock.json и yarn.lock) и установите последнюю версию Nuxt 2:

package.json
- "nuxt": "^2.16.3"
+ "nuxt": "^2.17.3"

Затем переустановите ваши зависимости:

npm install
После установки убедитесь, что проект собирается и в режиме разработки, и для продакшена, как ожидается, и только затем продолжайте.

Установка Nuxt Bridge

Установите @nuxt/bridge и nuxi в качестве зависимостей для разработки:

npm install -D @nuxt/bridge nuxi

Обновите nuxt.config

Старайтесь не использовать в конфигурации синтаксис CommonJS (module.exports, require, require.resolve): он будет объявлен устаревшим и перестанет поддерживаться.

Вместо этого вы можете использовать статический import, динамический import() и export default. Использование TypeScript путём переименования файла в nuxt.config.ts также возможно и рекомендуется.

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: false,
})

Обновите команды

Команда nuxt теперь должна быть изменена на команду nuxt2.

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxt2",
-   "build": "nuxt build",
+   "build": "nuxt2 build",
-   "start": "nuxt start",
+   "start": "nuxt2 start"
  }
}

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

(Если bridge: false, приложение ведёт себя как до подключения Bridge.)

Шаги обновления

С помощью Nuxt Bridge переход на Nuxt 3 можно разбить на этапы. Шаги ниже не обязательно выполнять подряд и сразу.

Миграция с CommonJS на ESM

Nuxt 3 изначально поддерживает TypeScript и модули ECMAScript. Подробности и рекомендации по коду — в разделе о нативных ES-модулях.