VueCraft NPM

Image Kit ​

1.3.2 ​

2026-10-01

  • A sources entry (art direction) can now carry its own placeholder — blurhash, thumbhash, placeholder or placeholderColor next to src, or an ImageMeta from a ?vik import. While that entry's breakpoint is active, <VImage> shows its placeholder at its proportions instead of the root image's, so a blurhash of a vertical photo is no longer stretched into a horizontal tablet box. The matching entry replaces the root's whole placeholder set; entries without a placeholder, and breakpoints with no matching entry, keep using the root's. Placeholders manifest entries are looked up by the source's src as well. New exported type: SourcePlaceholder. See Per-breakpoint placeholders.
  • npx vue-image-kit placeholders now fills in sources entries too. Every statically resolvable entry of a literal :sources="{ … }" gets a placeholder, even when the image's own src is dynamic — through the manifest, or written into the literal. Entries that already have a placeholder are left alone. See Art-direction sources.

1.3.1 ​

2026-10-01

  • npx vue-image-kit placeholders has a new --replace flag. Until now the command skipped every <VImage> that already had a placeholder. With --replace, it swaps that placeholder for a new one of the kind set by --mode. Only attributes with a plain value are replaced: blurhash, thumbhash, placeholder, placeholder-color and placeholder-mode. Bound values (such as :thumbhash="item.hash") and :image stay as they are. See Replacing existing placeholders.

1.3.0 ​

2026-10-01

  • New npx vue-image-kit scan command — a report of how vue-image-kit is used across the project. It finds every <VImage> (in templates, JSX and h() calls, including locally renamed imports), every v-lazy-img and every useImage()/useBackgroundImage() call, works out where each image comes from — a local import, a public/ path (checking the file exists), a CDN URL with its provider, a remote URL, a ?vik import, or a dynamic value — and prints usage per source and per file, prop statistics, and warnings such as a missing alt, no size, no placeholder or a missing file. Reports can be written as JSON, Markdown or CSV, and --fail-on turns it into a CI check. See CLI — Usage Report.
  • New npx vue-image-kit placeholders command — computes a BlurHash, a ThumbHash or the image's dominant color, plus its original size, for every <VImage> that has no placeholder yet. Local and public/ images are read from disk; CDN and remote images are downloaded only with --remote. The result goes into a placeholders manifest for images the app can look up by src, or straight into the template — for local imports, and for the whole project when no manifest is registered. Files with uncommitted changes are never edited. See CLI — Placeholders for Existing Images.
  • <VImage> can now take its placeholder and size from a placeholders manifest registered once with app.use(VImageKitPlugin, { placeholders }) or the Nuxt module's new placeholders option, instead of from per-usage props. Explicit props and the image prop still take precedence; apps without a manifest are unaffected. New exports: PLACEHOLDERS_KEY, PlaceholderEntry, PlaceholderManifest.
  • New detectCdnProvider() in @macrulez/vue-image-kit/cdn — names which auto-detected CDN a URL belongs to.
  • The CLI is now organized into commands — generate (still the default), scan and placeholders — each with its own --help. When sharp or thumbhash is missing, the CLI now shows the install command for npm, pnpm and yarn.
  • Fixed: ThumbHash generation (generate --thumbhash and the Vite plugin's ?thumbhash/?vik imports) failed for portrait images — the image was shrunk to 100px wide only, so anything taller than wide stayed over the 100×100 limit ThumbHash allows. Images are now fitted inside 100×100.