Installation

Requirements

Environment	Minimum version
Node.js	18+
vue	3.3.0+ (only for @macrulez/masonry-kit-vue)
react	18.0.0+ or 19.0.0+ (only for @macrulez/masonry-kit-react)
nuxt	3.9.0+ or 4.0.0+ (only for @macrulez/masonry-kit-nuxt)

@macrulez/masonry-kit-core has no framework dependency at all.

Installation

npm install @macrulez/masonry-kit-core

For Vue 3 — includes every core export re-exported, so this alone is enough, no separate core install needed:

npm install @macrulez/masonry-kit-vue

For React — same re-export pattern as the Vue package:

npm install @macrulez/masonry-kit-react

For Nuxt — wraps the Vue package and adds auto-imports:

npm install @macrulez/masonry-kit-nuxt

Quick start: Vanilla JS

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 },
])

The engine sets container's CSS position to relative itself — no manual CSS needed to get started.

Quick start: 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>

Quick start: React

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 is explicit here for clarity, but <MasonryGrid> (Vue, React, Nuxt) doesn't require it — omit it and one gets generated automatically, keyed by the item object's own reference, staying stable as long as it's the same object. See MasonryGrid Component for details.

Quick start: Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/masonry-kit-nuxt'],
  masonry: {
    columns: 'auto',
    minLaneSize: 240,
  },
})

<template>
  <!-- <MasonryGrid>/useMasonry are auto-imported — no explicit import needed -->
  <MasonryGrid :items="items">
    <template #item="{ item }">
      <MyCard :data="item" />
    </template>
  </MasonryGrid>
</template>