Хуки и расширение типов

Хуки жизненного цикла, виртуальные файлы и TypeScript в модулях.

Продвинутые приёмы: хуки, шаблоны и расширение типов.

Хуки жизненного цикла

Хуки жизненного цикла позволяют расширять почти любую часть Nuxt. Модули могут подключаться к ним программно или через объект hooks в определении модуля.

import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'app:error': (err) => {
      console.info(`Ошибка: ${err}`)
    },
  },
  setup (options, nuxt) {
    nuxt.hook('pages:extend', (pages) => {
      console.info(`Найдено ${pages.length} страниц`)
    })
  },
})
Узнать больше Docs > 4 X > API > Advanced > Hooks.
Видео Vue School о хуках жизненного цикла в модулях.
Очистка в модуле: если модуль открывает ресурсы или запускает watcher, закройте их в хуке close.

Собственные хуки

Модули могут объявлять и вызывать свои хуки — так модуль становится расширяемым. Вызывайте свои хуки в хуке modules:done, чтобы остальные модули успели подписаться в своём setup.

Виртуальные файлы

Утилита addTemplate добавляет виртуальный файл, который можно импортировать в приложении пользователя. Для сервера используйте addServerTemplate. Обновление шаблонов — через updateTemplates (например, в builder:watch).

Типовые декларации

Чтобы расширить типы в проекте пользователя (например, интерфейсы Nuxt или свои глобальные типы), используйте addTypeTemplate: он записывает шаблон на диск и добавляет ссылку в сгенерированный nuxt.d.ts. Более тонкий контроль — через хук prepare:types и добавление ссылок в references.

Расширение конфигурации TypeScript

Можно расширять nuxt.options.typescript.tsConfig, sharedTsConfig, nodeTsConfig и для Nitro — nuxt.options.nitro.typescript.tsConfig. Либо использовать хуки prepare:types и nitro:prepare:types для добавления ссылок на файлы типов в нужный контекст (app, shared, node, server).

Ссылки TypeScript подключают файлы к контексту типов независимо от exclude в tsconfig.

Расширение типов (augment)

Nuxt автоматически подключает директории модуля к нужным типовым контекстам. Файлы деклараций размещайте в подходящей директории или расширяйте конфигурацию TypeScript:

  • my-module/runtime/ — контекст app (кроме runtime/server);
  • my-module/runtime/server/ — контекст server;
  • my-module/ — контекст node (кроме runtime/ и runtime/server).

Серверные маршруты проверяются и в tsconfig.app.json, и в tsconfig.server.json (для вывода типов ответов в $fetch/useFetch). Если в маршрутах используются только серверные типы из addServerTemplate, они могут быть недоступны в app-контексте — в таком случае объявите эти типы и в app-контексте.