Своя логика art direction

useBreakpoints(localBreakpoints?) — composable, который VImage использует внутри себя, чтобы преобразовать пропы sources/breakpoints в отсортированные записи <source>. Доступен напрямую для headless-сценариев, которые строят собственную арт-дирекционную разметку.

import { useBreakpoints } from '@macrulez/vue-image-kit'

const { merged, resolveMediaSources } = useBreakpoints({
  sm: '(max-width: 640px)',
})

Аргументы

localBreakpoints

BreakpointMap, опционален. Брейкпоинты уровня компонента, сливаются поверх глобальных брейкпоинтов, зарегистрированных через VImageKitPlugin/модуль Nuxt — локальная запись с тем же ключом переопределяет глобальную.

Возвращаемое значение

merged

ComputedRef<BreakpointMap>. Локальные брейкпоинты, слитые с глобальными, инжектированными из плагина.

resolveMediaSources

(sources: ResponsiveSrc | undefined) => MediaSource[]. Превращает карту sources (брейкпоинт-ключ → URL, { avif?, webp?, fallback }, { src, width?, height?, srcset?, sizes? } или объект ImageMeta) в отсортированный массив записей, готовых к рендеру как элементы <source>:

interface MediaSource {
  media: string
  src: string
  type?: string
  width?: number
  height?: number
  sizes?: string
  fallback: string
  placeholder?: SourcePlaceholder
}

fallback — URL записи в обычном формате (по нему ищется запись манифеста плейсхолдеров), а placeholder содержит собственные hazehash/blurhash/thumbhash/placeholder/placeholderColor записи, если они есть, — см. Плейсхолдеры на брейкпоинт.

Порядок сортировки повторяет то, как <picture> реально вычисляет источники — браузер выбирает первый подходящий <source> сверху вниз:

• запросы max-width — по возрастанию (mobile-first: 640px перед 1024px)
• запросы min-width — по убыванию (desktop-first: 1600px перед 1025px)
• всё остальное — в исходном порядке объявления

Когда значение брейкпоинта — объект формата, а не простой URL, его записи avif/webp/fallback добавляются вместе (в этом порядке) под одним и тем же запросом media, поэтому переключение форматов и арт-дирекция комбинируются без дополнительных усилий. Все форматные варианты одной записи используют общие width/height/sizes этой записи, кроме srcset — если он задан, то переопределяет атрибут srcset только у fallback-варианта.

width/height в одной записи работают по принципу «оба или ни одного» — если задать только один из них, отбрасываются оба, с предупреждением console.warn в режиме разработки, объясняющим причину. Ключ sources, для которого нет подходящего брейкпоинта, тоже отбрасывается — также с предупреждением только в режиме разработки, называющим ключ и доступные брейкпоинты. См. Размеры на брейкпоинт — фичу уровня <VImage>, которую всё это обеспечивает.