Demo

Clone the repo and run the demo locally:

git clone https://github.com/macrulezru/vue-image-kit.git
cd vue-image-kit
npm run demo

The dev server starts at http://localhost:5173. No extra setup required — the demo imports directly from src/ via Vite alias.

Tab	What it shows
Basic	<VImage> props playground — live controls for all options, all loading states
Blurhash & LQIP	Side-by-side blurhash canvas vs base64 blur-up; live blurhash string input
Color & Shimmer	placeholderMode comparison — blur vs ThumbHash vs solid average color vs animated shimmer
AVIF / WebP	Format switching via <picture>, browser format detection, file size comparison
srcset	Three previews at 400 / 800 / 1200 px — currentSrc changes with sizes; live sizes editor
Density 1x/2x/3x	Density descriptors for fixed-size images; live generateDensitySrcset output and device DPR
Responsive sources	Art direction with named breakpoints — <source media="..."> switching
Focal point	:focal="{ x, y }" → object-position with a draggable marker over a cropped frame
Layout & priority	layout="fixed" | "responsive" | "fill" side by side; priority (eager + fetchpriority="high")
Lazy Load	20+ images with per-item status badges; configurable rootMargin and threshold
v-lazy-img	36-card grid with background-image lazy loading; LQIP toggle; event log
Background image	useBackgroundImage() — lazy + responsive image-set() background with blur-up
Encode (upload)	Client-side encodeThumbHash / encodeBlurhash from an uploaded file, with decoded preview
Error State	Default SVG fallback vs custom #error slot; @error event log; maxRetries exponential backoff demo
Headless	useImage() composable with fully custom markup and reactive state display
CDN adapters	Live URL / srcset builder for all 12 providers (Cloudinary, imgix, Bunny, Sanity, Storyblok, Contentful, Vercel, Cloudflare, ImageKit, TwicPics, Netlify, Gumlet)
Build-time imports	The ?vik / ?thumbhash workflow explained, with the resolved metadata shape

Nuxt demo

The Vite demo above covers the component/CLI/CDN/server features but nothing Nuxt-specific. demo-nuxt/ is a separate, minimal Nuxt 3 app (same "import straight from src/" trick, via nuxt.config.ts's vite.resolve.alias) that exercises exactly the parts the Vite demo can't: module registration + breakpoints, auto-imported composables/utilities with zero explicit imports, onDemandServer actually registering a working Nitro route, and server-rendered <VImage> output (isSSR branch) — verified against both nuxt dev and a real nuxt build output.

npm run demo:nuxt        # installs demo-nuxt's own deps + starts nuxt dev
npm run demo:nuxt:build  # production build (.output/), no dev server