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, or { avif?, webp?, fallback }) into a sorted array of { media, src, type? } entries ready to render as <source> elements.

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.