VueCraft NPM

Image Kit ​

1.1.8 ​

2026-09-24

  • <VImage> no longer forces display/box-sizing/object-fit as inline styles when it doesn't need to — inline styles always beat a class your app applies to the same element, regardless of specificity. An explicit fit prop is still applied inline (guaranteed to win). Left unset, the object-fit: cover default now comes from a plain, overridable CSS class — applied only when the image box is actually constrained (layout"fill"/"fixed", or both width and height given), and omitted otherwise since it has no effect without a constrained box. The same applies to the base display/sizing styles — width: 100%; height: auto is now only applied when both width and height are given (there's no intrinsic ratio to preserve otherwise), so a bare <VImage> sized purely through your own max-height/max-width CSS keeps its natural aspect ratio instead of being stretched to the container's full width.
  • Fixed: the package's stylesheet (the shimmer placeholder's animation, and now the classes above) was never reachable via import '@macrulez/vue-image-kit/style.css' — it wasn't declared in the package's exports, so placeholderMode="shimmer" shipped non-functional everywhere. The Nuxt module now registers the stylesheet automatically.
  • Fixed: 1.1.7's wrapper removal caused <VImage> to trigger a Vue hydration mismatch warning on every server-rendered page — the check it used to decide what to render couldn't tell "the server" from "the client's very first render during hydration", so the two never actually matched. It's now hydration-safe.

1.1.7 ​

2026-09-23

  • <VImage> no longer renders inside a wrapper <span>. Every earlier version wrapped the real <img> (and, while loading, whichever blurhash <canvas>/LQIP-ThumbHash <img>/solid-color or shimmer <span> placeholder was active) in a persistent positioning <span>, which made the component awkward to drop into markup that expects to own the element it's styling directly. Every placeholder kind is now painted as a CSS background directly on the same element that goes on to show the real photo — an idle placeholder element before loading starts, swapped outright (not nested) for the real <img>/<picture> once it does. class/style/data-*/other attributes now land on that one real element. The smooth "blur visible through a fading-in sharp photo" crossfade isn't possible anymore — swapping is an instant cut; the new fadeIn prop (below) is a different, simpler effect, not a replacement for the old one.
  • <VImage>'s new fadeIn prop (default false) opts into a ~0.3s opacity fade-in on mount.

1.1.6 ​

2026-09-12

  • v-lazy-img now shares the same pooled IntersectionObserver every other lazy-loading path uses, instead of creating its own per element.
  • Unset layout now gets the same auto-sizes heuristic as layout="responsive".
  • Blurhash and a LQIP/thumbhash placeholder can no longer mount simultaneously when both props are supplied — restored a single either/or precedence.