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

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

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

Рекомендуем начинать со [стартер-шаблона](https://github.com/nuxt/starter/tree/module):

<code-group sync="pm">

```bash [npm]
npm create nuxt -- -t module my-module
```

```bash [yarn]
yarn create nuxt -t module my-module
```

```bash [pnpm]
pnpm create nuxt -t module my-module
```

```bash [bun]
bun create nuxt --template=module my-module
```

</code-group>

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

**Дальше:**

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

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

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

<tip icon="i-lucide-video" target="_blank" to="https://vueschool.io/lessons/navigating-the-official-starter-template?friend=nuxt">

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

</tip>

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

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

- Запуск: `npm run dev` — перезагрузка при изменениях в `src`
- Сборка площадки: `npm run dev:build`

<note>

Любая команда `nuxt` можно выполнять для каталога `playground`: `nuxt <КОМАНДА> playground`. Дополнительные скрипты `dev:*` в `package.json` — по желанию.

</note>

### Тесты

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

- линтер [ESLint](https://eslint.org): `npm run lint`
- [Vitest](https://vitest.dev): `npm run test` или `npm run test:watch`

<tip>

Настройте тесты под свои задачи.

</tip>

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

Сборщик — [`@nuxt/module-builder`](https://github.com/nuxt/module-builder#readme): без ручной конфигурации, с TypeScript и корректной упаковкой артефактов.

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

<tip>

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

</tip>

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

<important>

Нужен аккаунт на [npmjs.com](https://www.npmjs.com) и локальный вход: `npm login`.

</important>

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

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

Скрипт:

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

<tip>

При необходимости отредактируйте скрипт `release` в `package.json`.

</tip>