VueCraft NPM

Image Kit ​

1.3.2 ​

2026-10-01

  • Запись sources (art direction) теперь может нести собственный плейсхолдер — blurhash, thumbhash, placeholder или placeholderColor рядом с src, либо ImageMeta из импорта ?vik. Пока брейкпоинт этой записи активен, <VImage> показывает её плейсхолдер в её пропорциях, а не плейсхолдер корневого изображения, — так blurhash вертикального фото больше не растягивается в горизонтальный бокс планшета. Совпавшая запись заменяет весь набор плейсхолдеров корня; записи без плейсхолдера и брейкпоинты, на которых ни одна запись не совпала, по-прежнему используют плейсхолдер корня. Записи манифеста плейсхолдеров тоже ищутся по src источника. Новый экспортируемый тип: SourcePlaceholder. Подробнее — в разделе Плейсхолдеры на брейкпоинт.
  • Команда npx vue-image-kit placeholders теперь заполняет и записи sources. Каждая статически определяемая запись литерала :sources="{ … }" получает плейсхолдер, даже если собственный src изображения динамический, — через манифест или прямо в литерале. Записи, у которых плейсхолдер уже есть, не трогаются. Подробнее — в разделе Источники art direction.

1.3.1 ​

2026-10-01

  • У команды npx vue-image-kit placeholders появился флаг --replace. Раньше команда пропускала <VImage>, у которых плейсхолдер уже задан. С флагом --replace она заменяет такой плейсхолдер на новый — того вида, что указан в --mode. Заменяются только атрибуты с обычным значением: blurhash, thumbhash, placeholder, placeholder-color и placeholder-mode. Привязанные значения (например, :thumbhash="item.hash") и :image остаются без изменений. Подробнее — в разделе Замена существующих плейсхолдеров.

1.3.0 ​

2026-10-01

  • Новая команда npx vue-image-kit scan — отчёт о том, как vue-image-kit используется в проекте. Находит каждый <VImage> (в шаблонах, JSX и вызовах h(), в том числе под локальным алиасом импорта), каждый v-lazy-img и каждый вызов useImage()/useBackgroundImage(), определяет источник каждого изображения — локальный импорт, путь из public/ (с проверкой, что файл существует), CDN с указанием провайдера, удалённый URL, импорт ?vik или динамическое значение — и выводит количество использований по источникам и файлам, статистику пропсов и предупреждения: нет alt, нет размеров, нет плейсхолдера, файл не найден. Отчёт можно сохранить в JSON, Markdown или CSV, а --fail-on превращает команду в проверку для CI. Подробнее — CLI — отчёт об использовании.
  • Новая команда npx vue-image-kit placeholders — вычисляет BlurHash, ThumbHash или доминирующий цвет изображения и его исходный размер для каждого <VImage>, у которого ещё нет плейсхолдера. Локальные изображения и файлы из public/ читаются с диска, CDN и удалённые — скачиваются только с флагом --remote. Результат попадает в манифест плейсхолдеров для изображений, которые приложение может найти по src, либо прямо в шаблон — для локальных импортов и для всего проекта, если манифест не зарегистрирован. Файлы с незакоммиченными изменениями не правятся. Подробнее — CLI — плейсхолдеры для готовой вёрстки.
  • <VImage> теперь может брать плейсхолдер и размеры из манифеста плейсхолдеров, зарегистрированного один раз через app.use(VImageKitPlugin, { placeholders }) или новую опцию placeholders модуля Nuxt, вместо пропсов на каждом использовании. Явные пропсы и проп image по-прежнему в приоритете; приложения без манифеста это не затрагивает. Новые экспорты: PLACEHOLDERS_KEY, PlaceholderEntry, PlaceholderManifest.
  • Новая функция detectCdnProvider() в @macrulez/vue-image-kit/cdn — сообщает, к какому из автоматически распознаваемых CDN относится URL.
  • CLI теперь разделён на команды — generate (по-прежнему команда по умолчанию), scan и placeholders, — у каждой своя --help. Если не установлен sharp или thumbhash, CLI показывает команду установки для npm, pnpm и yarn.
  • Исправлено: генерация ThumbHash (generate --thumbhash и импорты ?thumbhash/?vik во Vite-плагине) падала на вертикальных изображениях — картинка уменьшалась только до ширины 100px, и всё, что выше, чем шире, оставалось за пределами допустимых для ThumbHash 100×100. Теперь изображение вписывается в 100×100.