Nuxt Nation conference is coming. Join us on November 12-13.

Обзор

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

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

Используя Nuxt 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, ваше приложение будет работать без изменений, как и раньше.)

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

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

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

Nuxt 3 изначально поддерживает TypeScript и модули ECMAScript. Пожалуйста, проверьте Native ES Modules для получения дополнительной информации и обновления.