Image Kit
A complete image optimization toolkit for Vue 3 — lazy loading, format switching, responsive art direction, a CLI, CDN URL builders, and a Nuxt module.
Powerful VImage component with optimizations
One component replaces a whole set of utilities: lazy loading via IntersectionObserver, placeholders (Blurhash, ThumbHash, LQIP, color, shimmer), automatic srcset, WebP/AVIF, art direction, retries with exponential backoff, and smooth CSS transitions. Supports focal point, fetchpriority, decoding, and a priority mode for LCP.
CLI, Vite plugin, and Nuxt module
The CLI processes images at build time: resize, convert to WebP/AVIF, generate LQIP and BlurHash/ThumbHash, write a TypeScript manifest. The Vite plugin runs processing on build and in dev mode. The Nuxt module auto‑registers the component and all composables, integrating with runtime config.
CDN adapters and auto-detection
Ready‑to‑use URL builders for 12 providers (Cloudinary, imgix, Bunny, Sanity, Storyblok, Contentful, Vercel, Cloudflare, ImageKit, TwicPics, Netlify, Gumlet) with a unified .url() and .srcset() interface. The autoLoader() function detects the CDN by host and applies the adapter automatically, and VImage with the cdn prop does it right in the template.
Flexible composables and directives
useImage provides headless loading state management and attributes for custom markup. v-lazy-img loads background images on viewport entry with placeholder support. useBackgroundImage adds lazy + responsive via CSS image-set(). useImagePreloader preloads images before navigation.
Performance and SSR safety
Built‑in mechanisms: priority loading (fetchpriority), decoding (decoding), Network Information API (saveData), preloading via generatePreloadLink and useImagePreloader. A shared IntersectionObserver pool saves resources. All components and utilities are SSR‑safe — the server renders a plain <img>, and all client logic activates after hydration.