Модули Nuxt

Модуль — пакет, который расширяет сам Nuxt: добавляет компоненты, composables, серверные обработчики или меняет сборку. Модулем вы уже пользовались, когда подключали Pinia. Готовые модули есть для картинок, шрифтов, переводов, аутентификации и многого другого; их список — на сайте nuxt.com в разделе Modules.

Установка

Подключите официальный модуль для картинок:

npx nuxi module add image

Команда установит пакет @nuxt/image и добавит его в настройки:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image']
})

Порядок в массиве modules — порядок подключения. После перезапуска npm run dev модуль начнёт работать.

Использование

Модуль добавил компонент <NuxtImg>. Он работает как <img>, но умеет уменьшать картинку под нужный размер:

<!-- app/pages/index.vue -->
<template>
  <section>
    <NuxtImg src="/images/cover.jpg" width="600" alt="Обложка блога" />
  </section>
</template>

Картинка берётся из папки public/. Посмотрите адрес картинки в инструментах разработчика браузера: модуль отдаёт уменьшенную копию шириной 600 пикселей, а не исходный файл.

Настройки модуля

Модуль обычно читает настройки из ключа со своим именем в nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    quality: 80,
    format: ['webp']
  }
})

Теперь картинки отдаются в формате WebP с качеством 80. Какие настройки есть у модуля, написано в его документации; редактор тоже подсказывает их, потому что модуль добавляет типы.

Популярные модули

Удаление

Чтобы отключить модуль, уберите его из массива modules, а затем удалите пакет: npm uninstall @nuxt/image. Компоненты модуля, например <NuxtImg>, после этого перестанут работать — замените их обычными тегами.

Частая ошибка

Установить модуль командой npm install @nuxt/image и сразу использовать <NuxtImg>. Пакет в node_modules появится, но Nuxt о нём не знает, пока имени нет в массиве modules, и Vue выведет предупреждение о неизвестном компоненте. Ставьте модули командой npx nuxi module add — она и устанавливает пакет, и прописывает его в настройках.