Первый модуль

Создайте модуль Nuxt на официальном стартовом шаблоне.

Создание модуля

Рекомендуем начинать со стартер-шаблона:

npm create nuxt -- -t module my-module

Появится проект my-module с заготовкой для разработки и публикации.

Дальше:

  1. Откройте my-module в IDE
  2. Установите зависимости пакетным менеджером
  3. Выполните npm run dev:prepare для подготовки локальных файлов
  4. Читайте этот раздел дальше про устройство модулей

Стартовый шаблон

Базовые действия со стартером.

Видео Vue School про стартер модуля Nuxt.

Разработка {#module-starter-dev}

Исходники модуля — в src/. Для проверки рядом есть Nuxt-приложение playground: оно уже подключено к вашему модулю.

  • Запуск: npm run dev — перезагрузка при изменениях в src
  • Сборка площадки: npm run dev:build
Любая команда nuxt можно выполнять для каталога playground: nuxt <КОМАНДА> playground. Дополнительные скрипты dev:* в package.json — по желанию.

Тесты

В стартере уже есть:

  • линтер ESLint: npm run lint
  • Vitest: npm run test или npm run test:watch
Настройте тесты под свои задачи.

Сборка модуля

Сборщик — @nuxt/module-builder: без ручной конфигурации, с TypeScript и корректной упаковкой артефактов.

Команда: npm run prepack.

Часто сборка вручную не нужна: в dev её делает playground, при релизе — скрипт публикации.

Публикация в npm

Нужен аккаунт на npmjs.com и локальный вход: npm login.

Проще пользоваться встроенным скриптом выпуска релиза, чем только npm publish: он прогоняет проверки и выкладывает рабочую версию.

  1. Закоммитьте изменения (желательно в формате Conventional Commits — тогда версия и журнал изменений обновятся автоматически)
  2. Запустите npm run release

Скрипт:

  • прогоняет npm run lint, тесты и npm run prepack
  • при успехе поднимает версию и обновляет журнал изменений
  • публикует пакет в npm (модуль снова собирается с новой версией)
  • пушит git-тег версии в origin
При необходимости отредактируйте скрипт release в package.json.