VueCraft NPM

Установка ​

Требования ​

Обязательных peer-зависимостей нет — ядро (состояние вьюпорта/контейнера, утилиты, пресеты), импортированное из корня пакета, работает автономно без Vue и React. Адаптеры Vue и React живут каждый в своей отдельной подточке входа, так что импорт из корня никогда не тянет ни один из фреймворков:

ОкружениеМинимальная версия
Node.js18+
Vue^3.5.27 (опционально, для /vue)
React^19.0.0 (опционально, для /react)
Nuxt^3.9.0 || ^4.0.0 (опционально, для /nuxt)

Установка ​

bash
npm install responsive-media

Обязательных peer-зависимостей нет. Импортируйте адаптер Vue из responsive-media/vue, а адаптер React — из responsive-media/react, когда установлен соответствующий пакет ниже:

bash
npm install vue@^3.5.27     # для Vue composables
npm install react@^19.0.0   # для React-хуков

Для Nuxt больше ничего устанавливать не нужно: добавьте 'responsive-media/nuxt' в modules — см. Интеграция с Nuxt.

Быстрый старт ​

ts
import { responsiveState, setResponsiveConfig } from 'responsive-media'

setResponsiveConfig({
  mobile: [{ type: 'max-width', value: 767 }],
  tablet: [
    { type: 'min-width', value: 768 },
    { type: 'max-width', value: 1023 },
  ],
  desktop: [{ type: 'min-width', value: 1024 }],
})

// Читаем текущее состояние
console.log(responsiveState.proxy.mobile) // true / false

// Подписываемся на изменения
const stop = responsiveState.subscribe((state) => {
  console.log('desktop:', state.desktop)
})

// Очистка
stop()