VueCraft NPM

Модуль Nuxt ​

ts
// 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 и утилита этого пакета автоимпортируются — см. Автоимпорты ниже

Опции модуля ​

ts
vueImageKit: {
  breakpoints: { sm: '(max-width: 640px)' },
  serverRoute: '/api/img',
  onDemandServer: true,
}
  • breakpoints — BreakpointMap · по умолчанию: {}. Глобальные брейкпоинты для арт-дирекции, так же как и опция breakpoints у Vue-плагина — см. Глобальные брейкпоинты.
  • serverRoute — string, опционален. Маршрут по умолчанию для loader="server" — см. useServerRoute(). Нужно задавать напрямую только когда обработчик по запросу размещён там, куда его не регистрировал этот модуль; задаётся автоматически, когда используется onDemandServer.route.
  • onDemandServer — boolean | OnDemandServerOptions, опционален. Регистрирует самостоятельный сервер как настоящий маршрут Nitro — см. Изображения по запросу как маршрут Nitro ниже.

Автоимпорты ​

Каждый публичный 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/...:

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

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

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