VueCraft NPM

Установка ​

Требования ​

ОкружениеМинимальная версия
Node.js18+
vue3.3.0+ (только для @macrulez/masonry-kit-vue)
react18.0.0+ или 19.0.0+ (только для @macrulez/masonry-kit-react)
nuxt3.9.0+ или 4.0.0+ (только для @macrulez/masonry-kit-nuxt)

У @macrulez/masonry-kit-core вообще нет зависимости от фреймворка.

Установка ​

bash
npm install @macrulez/masonry-kit-core

Для Vue 3 — включает все экспорты ядра в виде реэкспорта, так что этого пакета достаточно, отдельно ядро ставить не нужно:

bash
npm install @macrulez/masonry-kit-vue

Для React — тот же паттерн реэкспорта, что у Vue-пакета:

bash
npm install @macrulez/masonry-kit-react

Для Nuxt — оборачивает Vue-пакет и добавляет автоимпорты:

bash
npm install @macrulez/masonry-kit-nuxt

Быстрый старт: Vanilla JS ​

ts
import { createMasonryEngine } from '@macrulez/masonry-kit-core'

const container = document.querySelector<HTMLElement>('#grid')!
const engine = createMasonryEngine(container, { columns: 'auto', minLaneSize: 240 })

engine.setItems([
  { id: 'a', el: document.querySelector<HTMLElement>('#card-a')! },
  { id: 'b', el: document.querySelector<HTMLElement>('#card-b')!, colSpan: 2 },
])

Движок сам задаёт container CSS-позицию relative — вручную задавать CSS не нужно.

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

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

const items = [{ id: 'a' }, { id: 'b', colSpan: 2 }]
</script>

<template>
  <MasonryGrid :items="items" :options="{ columns: 'auto', minLaneSize: 240 }">
    <template #item="{ item }">
      <MyCard :data="item" />
    </template>
  </MasonryGrid>
</template>

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

tsx
import { MasonryGrid } from '@macrulez/masonry-kit-react'

const items = [{ id: 'a' }, { id: 'b', colSpan: 2 }]

function Gallery() {
  return (
    <MasonryGrid items={items} options={{ columns: 'auto', minLaneSize: 240 }}>
      {(item) => <MyCard data={item} />}
    </MasonryGrid>
  )
}

id у элементов здесь явный для наглядности, но <MasonryGrid> (Vue, React, Nuxt) не требует его — если не задать, id генерируется автоматически по ссылке на сам объект карточки и остаётся стабильным, пока это тот же объект. Подробнее — на странице Компонент MasonryGrid.

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

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/masonry-kit-nuxt'],
  masonry: {
    columns: 'auto',
    minLaneSize: 240,
  },
})
vue
<template>
  <!-- <MasonryGrid>/useMasonry — автоимпортируются, явный импорт не нужен -->
  <MasonryGrid :items="items">
    <template #item="{ item }">
      <MyCard :data="item" />
    </template>
  </MasonryGrid>
</template>