Авто-импорт компонентов и функций

В Nuxt вы не пишете import для своих компонентов и composables — фреймворк подключает их сам по имени файла.

Суть: Nuxt сканирует папки components/, composables/ и utils/ и делает их содержимое доступным глобально без ручных импортов. Имя компонента выводится из пути файла. Это сокращает шаблонный код, но требует понимания правил именования.

В чистом Vue верх каждого файла забит импортами: компоненты, composables, утилиты. В Nuxt этого почти нет — и это одна из самых приятных его особенностей. Всё, что лежит в components/, composables/ и utils/, авто-импортируется. Плюс к этому Nuxt авто-импортирует реактивные API Vue (ref, computed, watch) и собственные композаблы (useFetch, useRoute, useState).

Для компонентов имя выводится из пути. components/TheHeader.vue доступен как <TheHeader />. Вложенность кодируется в имени: components/blog/PostCard.vue становится <BlogPostCard /> — путь схлопывается в PascalCase-имя. Это устраняет коллизии имён между разными папками.

   Файл                              Имя в шаблоне

   components/TheHeader.vue       -> <TheHeader />
   components/blog/PostCard.vue   -> <BlogPostCard />
   components/ui/BaseButton.vue   -> <UiBaseButton />
   composables/useCart.ts         -> useCart()

Для composables и утилит работает то же: экспортированная функция становится доступна по имени без импорта. Вы пишете const cart = useCart() — и Nuxt сам найдёт composables/useCart.ts.

Как работает под капотом

При старте Nuxt строит реестр: проходит по папкам, собирает все экспортируемые компоненты и функции и генерирует виртуальные модули с импортами в .nuxt/. Сборщик (Vite) при компиляции подставляет нужные импорты автоматически — то есть авто-импорт не «магия рантайма», а аккуратная подстановка на этапе сборки. В бандл попадает только то, что реально используется (tree-shaking), поэтому авто-импорт не раздувает результат.

Смоделируем разрешение имени компонента из пути файла — именно эту нормализацию делает Nuxt:

// Как Nuxt превращает путь файла в имя компонента.
function componentName(path) {
  return path
    .replace(/^components\//, "")   // убрать префикс
    .replace(/\.vue$/, "")          // убрать расширение
    .split("/")                     // разбить по папкам
    .map(seg => seg.charAt(0).toUpperCase() + seg.slice(1)) // PascalCase
    .join("");                      // склеить
}

const files = [
  "components/TheHeader.vue",
  "components/blog/PostCard.vue",
  "components/ui/BaseButton.vue",
];

for (const f of files) {
  console.log(f.padEnd(34), "-> <" + componentName(f) + " />");
}

Попробуй сам ▶ — путь схлопывается в одно PascalCase-имя. Зная это правило, вы всегда предскажете имя компонента.

Частые ошибки

• Удивляться имени с префиксом папки. components/ui/BaseButton.vue — это <UiBaseButton />, а не <BaseButton />.
• Импортировать вручную «на всякий случай». Дублирующий импорт не нужен и иногда конфликтует с авто-импортом.
• Ждать авто-импорт из произвольной папки. Сканируются только условленные директории; для своих папок настройте их в конфиге.

Best practices

• Именуйте компоненты так, чтобы итоговое имя читалось: префиксы The, Base, App — общепринятые.
• Группируйте по подпапкам — префикс из имени папки заодно избавит от коллизий.
• Не борйтесь с авто-импортом ручными импортами; доверьтесь соглашению.

Итог: авто-импорт убирает гору шаблонного кода и делает Nuxt-проекты чище. Главное — понимать, как имя выводится из пути. Дальше — как компоненты обмениваются данными через props и события.

Важно понимать границу авто-импортов: они охватывают ваш код в условленных папках и встроенные API Nuxt и Vue, но не сторонние npm-пакеты. Импорт из lodash или клиента базы данных вы по-прежнему пишете явно. Это разумный компромисс: магия применяется там, где она предсказуема (ваши файлы по соглашениям), и не применяется там, где была бы непрозрачной (внешние зависимости). При желании набор авто-импортируемых функций и папок настраивается в nuxt.config — например, можно подключить утилиты из своей библиотеки, чтобы они тоже были доступны без импортов.