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

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

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

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

npm create nuxt -- -t module my-module

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

Дальше:

  1. Откройте my-module в IDE
  2. Установите зависимости
  3. Подготовьте файлы для разработки: npm run dev:prepare
  4. Изучайте документацию по модулям Nuxt

Работа со стартовым шаблоном

Базовые действия с шаблоном модуля.

Видео Vue School про стартовый шаблон модуля Nuxt.

Разработка модуля

Исходный код модуля лежит в src, а для разработки обычно нужна Nuxt-приложение — для этого служит папка playground: в ней приложение, уже настроенное на ваш модуль.

С playground можно работать как с обычным Nuxt-приложением.

  • Запуск dev-сервера: npm run dev (изменения в src подхватываются)
  • Сборка: npm run dev:build
Остальные команды nuxt можно запускать для playground (например nuxt <COMMAND> playground). В package.json можно добавить свои скрипты dev:*.

Запуск тестов

В шаблоне есть базовый набор тестов:

  • Линтер ESLint: npm run lint
  • Тесты Vitest: npm run test или npm run test:watch
Можно расширить тестовую стратегию под свои нужды.

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

Модули Nuxt собираются через @nuxt/module-builder. Конфигурация не требуется, поддерживается TypeScript, ассеты корректно упаковываются для распространения.

Сборка: npm run prepack.

Собирать вручную нужно не всегда: при разработке собирает playground, при публикации — скрипт release.

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

Перед публикацией нужен аккаунт на npmjs.com и локальная авторизация через npm login.

Можно публиковать вручную (поднять версию и выполнить npm publish), но в шаблоне есть скрипт release, который проверяет и публикует модуль.

Использование: закоммитьте изменения (удобно с Conventional Commits для авто-версий и changelog), затем npm run release.

Скрипт release:

  • Запускает тесты: lint, unit/integration/e2e, сборку модуля
  • При успехе: поднимает версию и генерирует changelog по Conventional Commits, публикует в npm, пушит git-тег новой версии в origin
Скрипт release в package.json можно настроить под себя.