Модули

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

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

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

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

Плагины 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.

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

Миграция из CommonJS в ESM

Nuxt 3 нативно поддерживает TypeScript и модули ECMAScript. Ознакомьтесь с разделом о нативных 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 () => { }

Не привязывайте модуль к среде выполнения Nuxt

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

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

• Избегайте обновления process.env внутри модуля Nuxt и чтения его с помощью плагина Nuxt. Вместо этого используйте runtimeConfig.
• (*) Избегайте зависимости от хуков среды выполнения, таких как vue-renderer:*, в продакшене
• (*) Избегайте добавления serverMiddleware путем импорта их внутри модуля. Вместо этого добавляйте их с помощью ссылки на путь к файлу, чтобы они были независимы от контекста модуля.

(*) Допустимо только если это нужно исключительно для nuxt dev и код обёрнут в if (nuxt.options.dev) { }.

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

Хотя это и не является обязательным, большая часть экосистемы Nuxt переходит на использование TypeScript, поэтому рекомендуется рассмотреть возможность миграции.