Своя логика 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 }) в отсортированный массив записей { media, src, type? }, готовых к рендеру как элементы <source>.

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

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

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