Демо
Клонируйте репозиторий и запустите демо локально:
bash
git clone https://github.com/macrulezru/vue-image-kit.git
cd vue-image-kit
npm run demoDev-сервер запускается на http://localhost:5173. Дополнительная настройка не требуется — демо импортирует напрямую из src/ через алиас Vite.
| Вкладка | Что показывает |
|---|---|
| Basic | Песочница пропов <VImage> — живые контролы для всех опций, все состояния загрузки |
| Blurhash & LQIP | Blurhash-canvas и base64 blur-up бок о бок; живой ввод строки blurhash |
| Color & Shimmer | Сравнение placeholderMode — blur vs ThumbHash vs сплошной средний цвет vs анимированный shimmer |
| AVIF / WebP | Переключение форматов через <picture>, определение формата браузером, сравнение размеров файлов |
| srcset | Три превью на 400 / 800 / 1200 px — currentSrc меняется вместе с sizes; живой редактор sizes |
| Density 1x/2x/3x | Дескрипторы плотности для изображений фиксированного размера; живой вывод generateDensitySrcset и DPR устройства |
| Responsive sources | Арт-дирекция с именованными брейкпоинтами — переключение <source media="..."> |
| Focal point | :focal="{ x, y }" → object-position с перетаскиваемым маркером поверх обрезанного кадра |
| Layout & priority | layout="fixed" | "responsive" | "fill" бок о бок; priority (eager + fetchpriority="high") |
| Lazy Load | 20+ изображений с бейджами статуса на каждый элемент; настраиваемые rootMargin и threshold |
| v-lazy-img | Сетка из 36 карточек с ленивой загрузкой фонового изображения; переключатель LQIP; лог событий |
| Background image | useBackgroundImage() — ленивый + адаптивный image-set() фон с blur-up |
| Encode (upload) | Клиентские encodeThumbHash / encodeBlurhash из загруженного файла, с превью декодированного результата |
| Error State | SVG-fallback по умолчанию vs кастомный слот #error; лог событий @error; демо экспоненциальной задержки maxRetries |
| Headless | Composable useImage() с полностью кастомной разметкой и отображением реактивного состояния |
| CDN adapters | Живой билдер URL / srcset для всех 12 провайдеров (Cloudinary, imgix, Bunny, Sanity, Storyblok, Contentful, Vercel, Cloudflare, ImageKit, TwicPics, Netlify, Gumlet) |
| Build-time imports | Объяснение workflow ?vik / ?thumbhash с разобранной формой метаданных |
Демо Nuxt
Демо на Vite выше покрывает возможности компонента/CLI/CDN/сервера, но ничего специфичного для Nuxt. demo-nuxt/ — отдельное, минимальное приложение Nuxt 3 (тот же приём «импорт напрямую из src/» через vite.resolve.alias в nuxt.config.ts), которое проверяет именно то, что демо на Vite не может: регистрацию модуля + breakpoints, автоимпортированные composables/утилиты без явных импортов, onDemandServer, реально регистрирующий рабочий маршрут Nitro, и серверный рендер <VImage> (ветка isSSR) — проверено и на nuxt dev, и на реальной сборке nuxt build.
bash
npm run demo:nuxt # устанавливает зависимости demo-nuxt + запускает nuxt dev
npm run demo:nuxt:build # продакшен-сборка (.output/), без dev-сервера