VueCraft NPM

Custom Art Direction Logic ​

useBreakpoints(localBreakpoints?) is the composable VImage uses internally to resolve its sources/breakpoints props into sorted <source> entries. Exposed directly for headless setups building their own art-direction markup. See Responsive sources — art direction for the feature-level overview.

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

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

Arguments ​

localBreakpoints ​

BreakpointMap, optional. Component-level breakpoints, merged on top of the global breakpoints registered via VImageKitPlugin/the Nuxt module — a local entry with the same key overrides the global one.

Return value ​

merged ​

ComputedRef<BreakpointMap>. The local breakpoints merged with the global ones injected from the plugin.

resolveMediaSources ​

(sources: ResponsiveSrc | undefined) => MediaSource[]. Turns a sources map (breakpoint-key → URL, { avif?, webp?, fallback }, { src, width?, height?, srcset?, sizes? }, or an ImageMeta object) into a sorted array of entries ready to render as <source> elements:

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

fallback is the entry's plain-format URL (the key a placeholders manifest is looked up by), and placeholder carries the entry's own hazehash/blurhash/thumbhash/placeholder/placeholderColor when it has any — see Per-breakpoint placeholders.

Sort order follows how <picture> actually evaluates sources — the browser picks the first matching <source> top to bottom:

  • max-width queries — ascending (mobile-first: 640px before 1024px)
  • min-width queries — descending (desktop-first: 1600px before 1025px)
  • anything else — original declaration order

When a breakpoint's value is a format object rather than a plain URL, its avif/webp/fallback entries are pushed together (in that order) under the same media query, so format switching and art direction compose for free. All format variants of one entry share that entry's width/height/sizes, except srcset, which — if given — overrides only the fallback variant's srcset attribute.

width/height on an entry are both-or-nothing — giving only one of the two drops both, with a console.warn in development explaining why. A sources key with no matching breakpoint is likewise dropped, also with a development-only warning naming the key and the breakpoints that are available. See Per-breakpoint sizes for the <VImage>-level feature this powers.