Модуль Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-image-kit/nuxt'],
  vueImageKit: {
    breakpoints: {
      sm: '(max-width: 640px)',
      md: '(max-width: 1024px)',
    },
  },
})

Рецепты интеграции показывают готовые конфигурации на все случаи — с пояснением, для чего каждая и когда её применять.

После настройки:

• <VImage> и v-lazy-img доступны во всех шаблонах без импортов
• Каждый composable и утилита этого пакета автоимпортируются — см. Автоимпорты ниже
• CSS для <VImage> (классы разметки/плейсхолдеров, анимация shimmer) регистрируется автоматически — не нужен ручной import '@macrulez/vue-image-kit/style.css', в отличие от обычного Vue 3

Опции модуля

vueImageKit: {
  breakpoints: { sm: '(max-width: 640px)' },
  serverRoute: '/api/img',
  onDemandServer: true,
  placeholders: { dirs: ['public/images'] },
}

• breakpoints — BreakpointMap · по умолчанию: {}. Глобальные брейкпоинты для арт-дирекции, так же как и опция breakpoints у Vue-плагина — см. Глобальные брейкпоинты.
• serverRoute — string, опционален. Маршрут по умолчанию для loader="server" — см. useServerRoute(). Нужно задавать напрямую только когда обработчик по запросу размещён там, куда его не регистрировал этот модуль; задаётся автоматически, когда используется onDemandServer.route.
• onDemandServer — boolean | OnDemandServerOptions, опционален. Регистрирует самостоятельный сервер как настоящий маршрут Nitro — см. Изображения по запросу как маршрут Nitro ниже.
• placeholders — string | object, опционален. Как каждый <VImage>, v-lazy-img и useBackgroundImage() получают свой плейсхолдер по src:
  • Строка — путь к файлу манифеста относительно корня проекта, обычно того, что записывает npx vue-image-kit placeholders. Модуль регистрирует плагин, который его передаёт.
  • Объект принимает все опции плейсхолдеров Vite-плагина — imports (плейсхолдер для каждого импортируемого изображения, с extensions, exclude и preview), mode, tuning, dirs, urls, publicDir, concurrency, timeout, maxBytes, refreshRemote — они описаны по одной в разделе Параметры плейсхолдеров, причём dirs — относительно корня проекта. Для манифеста плейсхолдеров используйте dirs и urls; для blur у каждого импортируемого изображения — imports; для готового превью в HTML от сервера — imports.preview вместе с пропсом ssrPlaceholder (см. шаг за шагом). Модуль сам регистрирует этот плагин, собирает манифест из папок при каждой сборке и передаёт его, так что запускать команду не нужно. Добавьте manifest: './image-placeholders.ts', чтобы объединить с ним ещё и файл манифеста.

Автоимпорты

Каждый публичный composable и утилита-функция автоимпортируются — useImage(), useBackgroundImage(), useBlurhash(), useBreakpoints(), useLazyLoad(), useImagePreloader(), useNetworkAware(), useServerRoute(), и каждая функция из Плейсхолдеров / Адаптивных изображений — импорт вручную не нужен ни для одной из них внутри Nuxt-приложения, использующего этот модуль.

Не автоимпортируются, намеренно: VImage/v-lazy-img регистрируются как глобальный компонент/директива отдельно (см. выше, это не composables); VImageKitPlugin устанавливает себя сам, поэтому импортировать его вручную было бы бессмысленно внутри этого модуля; BREAKPOINTS_KEY/SERVER_ROUTE_KEY — продвинутые константы-ключи инъекции, которые никому не нужны напрямую в Nuxt-приложении, уже настроенном этим модулем.

Изображения по запросу как маршрут Nitro

Задайте onDemandServer, чтобы зарегистрировать обработчик самостоятельного сервера как настоящий серверный маршрут Nitro через addServerHandler — без ручного файла server/routes/...:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-image-kit/nuxt'],
  vueImageKit: {
    onDemandServer: true, // root по умолчанию — собственная директория `public/` Nuxt
  },
})

<VImage src="/photos/cat.jpg" alt="Photo" :widths="[400, 800]" loader="server" />

onDemandServer: true использует все значения по умолчанию (root public/, маршрут /_vik/image); передайте объект, чтобы переопределить любое из них — те же опции, что у createImageHandler (root, cacheDir, maxAge, allowedWidths, maxWidth), плюс route:

vueImageKit: {
  onDemandServer: {
    root: 'assets/uploads',
    route: '/api/img',
    maxWidth: 2000,
  },
},

Маршрут также автоматически становится значением по умолчанию для loader="server" — повторять его как serverRoute не нужно, если только обработчик не размещён где-то, что этот модуль не зарегистрировал (например, развёрнут отдельно). root всегда попадает только в приватный runtime-конфиг (useRuntimeConfig().vueImageKitServer, только на сервере) — никогда не раскрывается клиенту, в отличие от breakpoints.