Модули

Совместимость модулей

В Nuxt 3 есть базовый слой совместимости для модулей Nuxt 2 через авто-обёртки @nuxt/kit. Обычно нужны дополнительные шаги, иногда — Nuxt Bridge для кросс-версионной совместимости.

Отдельное руководство описывает создание модулей для Nuxt 3 на @nuxt/kit. Оптимальный путь — следовать ему и переписать модуль. Ниже — подготовительные шаги, если хотите совместимость без полной переписи.

Совместимость плагинов

Плагины Nuxt 3 не полностью обратно совместимы с Nuxt 2.

Совместимость с Vue

Плагины и компоненты на Composition API должны поддерживать либо только Vue 2, либо только Vue 3.

С vue-demi возможна поддержка и Nuxt 2, и Nuxt 3.

Миграция модуля

При подключении вашего модуля в Nuxt 3 контейнер модуля (this.*) недоступен — используйте утилиты @nuxt/kit для доступа к функциональности контейнера.

Тестирование с @nuxt/bridge

Переход на @nuxt/bridge — первый и главный шаг для поддержки Nuxt 3.

Если в модуле есть fixture или пример, добавьте пакет @nuxt/bridge в его конфиг (см. пример).

Переход с CommonJS на ESM

Nuxt 3 нативно поддерживает TypeScript и ECMAScript Modules. Подробнее: нативные ES-модули.

Экспорт по умолчанию у плагинов

Если плагин Nuxt не имеет export default (например, глобальные Vue-плагины), добавьте в конец файла export default () => { }.

// ~/plugins/vuelidate.js
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

// ~/plugins/vuelidate.js
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

export default () => { }

Избегайте runtime-зависимостей в модулях

В Nuxt 3 Nuxt — только build-time зависимость, поэтому модули не должны полагаться на runtime Nuxt.

Модуль должен работать и при добавлении только в buildModules (вместо modules). Например:

• Не обновляйте process.env в модуле и не читайте его в плагине; используйте runtimeConfig.
• (*) Не полагайтесь на runtime-хуки вроде vue-renderer:* в production.
• (*) Не добавляйте serverMiddleware через импорт внутри модуля; указывайте путь к файлу, чтобы они не зависели от контекста модуля.

(*) Исключение — только для nuxt dev, с проверкой if (nuxt.options.dev) { }.

TypeScript (по желанию)

Обязательным не является, но экосистема Nuxt переходит на TypeScript — миграцию стоит рассмотреть.