Миграция на Nuxt Bridge: Обзор

Если вы начинаете новый проект на 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 для получения дополнительной информации и обновления.

Релизы

Открывайте последние релизы Nuxt и официальные модули Nuxt.

TypeScript

Узнайте, как использовать TypeScript с Nuxt Bridge.

Обзор