Установка

Требования

Peer-зависимость	Версия	Обязательна
`vue`	`^3.0.0`	да
`sharp`	`>=0.33.0`	только для CLI / плагина Vite / самостоятельного сервера
`thumbhash`	`>=0.1.0`	только для флага `--thumbhash` CLI и импортов `?thumbhash`/`?vik` на этапе сборки в Vite

Всё, что выполняется в браузере — decodeThumbHash(), проп thumbhash на VImage, клиентские кодировщики encodeThumbHash()/encodeBlurhash() — это собственная реализация без зависимостей. sharp/thumbhash нужны только для Node-инструментария, обрабатывающего изображения заранее.

Установка

bash

npm install @macrulez/vue-image-kit

Peer-зависимость:

bash

npm install vue@>=3.0

sharp и thumbhash — опциональные peer-зависимости, устанавливайте их только если используете CLI, плагин Vite или самостоятельный сервер:

bash

npm install sharp thumbhash --save-dev

Быстрый старт — Vue 3

1. Зарегистрируйте плагин

// main.ts
import { createApp } from 'vue'
import { VImageKitPlugin } from '@macrulez/vue-image-kit'
import App from './App.vue'

const app = createApp(App)
app.use(VImageKitPlugin)
app.mount('#app')

После установки <VImage> доступен во всех шаблонах без импорта, а v-lazy-img регистрируется как глобальная директива.

2. Используйте компонент

vue

<template>
  <VImage
    src="/photo.jpg"
    alt="Mountain landscape"
    :width="1200"
    :height="600"
    blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  />
</template>

<VImage> зарегистрирован глобально плагином. Импорт не нужен.

3. Или импортируйте явно

Пропустите плагин и импортируйте только то, что нужно — полезно, если нужна только директива или один composable, и вы хотите, чтобы бандлер вытеснил всё остальное:

import {
  VImageKitPlugin, // Vue-плагин
  VImage, // компонент
  vLazyImg, // директива
  useImage, // composable
  useBlurhash, // canvas composable
  useLazyLoad, // IO composable
  decodeBlurhash, // самостоятельный декодер
  generateSrcset, // утилита srcset
  generateSizes, // утилита sizes
} from '@macrulez/vue-image-kit'

vue

<script setup lang="ts">
import { VImage } from '@macrulez/vue-image-kit'
</script>

<template>
  <VImage src="/photo.jpg" alt="My photo" />
</template>

Быстрый старт — Nuxt 3

1. Добавьте модуль в nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/vue-image-kit/nuxt'],
  vueImageKit: {
    breakpoints: {
      sm: '(max-width: 640px)',
      md: '(max-width: 1024px)',
    },
  },
})

2. Используйте в страницах и компонентах — всё автоимпортируется

vue

<template>
  <VImage
    :src="{ avif: '/hero.avif', webp: '/hero.webp', fallback: '/hero.jpg' }"
    alt="Hero image"
    :width="1920"
    :height="1080"
    :widths="[640, 1024, 1920]"
    sizes="100vw"
    blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
    :lazy="true"
  />
</template>

<VImage>, v-lazy-img и все composables регистрируются автоматически — импорты не нужны. Canvas и IntersectionObserver активируются только на клиенте — без рассинхронизации при гидратации.

Установка ​

Требования ​