VueCraft NPM

Модуль Nuxt ​

Оборачивает @macrulez/masonry-kit-vue для Nuxt — автоимпортирует <MasonryGrid> и useMasonry, и подсевает их общие клиентские настройки по умолчанию из nuxt.config.ts.

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/masonry-kit-nuxt'],

  masonry: {
    columns: 'auto',
    minLaneSize: 240,
  },
})

Конфигурация ​

Каждое поле ниже повторяет соответствующее поле MasonryOptions (смотрите API движка, Анимации и SSR-рендеринг) и, если не задано, падает на точно такое же значение по умолчанию — модуль намеренно никогда не хардкодит собственный дефолт, так что будущее изменение дефолта в ядре никогда не окажется незаметно перекрыто слоем Nuxt.

direction ​

'vertical' | 'horizontal' · по умолчанию: берётся из MasonryOptions.direction

columns ​

LaneSpec · по умолчанию: берётся из MasonryOptions.columns

rows ​

LaneSpec · по умолчанию: берётся из MasonryOptions.rows

minLaneSize ​

number · по умолчанию: берётся из MasonryOptions.minLaneSize

gap ​

number | { main?: number; cross?: number } · по умолчанию: берётся из MasonryOptions.gap

placement ​

'balanced' | 'ordered' · по умолчанию: берётся из MasonryOptions.placement

animate ​

boolean · по умолчанию: берётся из MasonryOptions.animate

transitionDuration ​

number · по умолчанию: берётся из MasonryOptions.transitionDuration

transitionEasing ​

string · по умолчанию: берётся из MasonryOptions.transitionEasing

ssrColumns ​

number · по умолчанию: берётся из MasonryOptions.ssrColumns

Не покрывается опциями модуля (задавайте напрямую на <MasonryGrid :options="...">/useMasonry() — общего механизма дефолтов для них нет): virtualize, scrollContainer, estimateSize.

Пример — все опции сразу:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/masonry-kit-nuxt'],

  masonry: {
    direction: 'vertical', // колонки; 'horizontal' упаковывал бы по строкам
    columns: { default: 2, 768: 3, 1200: 4 }, // брейкпоинты, та же форма, что MasonryOptions.columns принимает напрямую
    minLaneSize: 240, // учитывается только если columns был бы 'auto'
    gap: { main: 20, cross: 16 }, // 20px между карточками в стопке, 16px между колонками
    placement: 'balanced', // побеждает наименее заполненная колонка, не строгий round-robin
    animate: true, // FLIP-анимировать пересчёт — дефолт, указан явно для наглядности
    transitionDuration: 300, // чуть медленнее дефолтных 250мс
    transitionEasing: 'ease-out', // обычное ключевое слово вместо дефолтного cubic-bezier
    ssrColumns: 3, // приближение через CSS columns до гидратации использует 3 колонки
  },
})

Регистрация ​

Модуль автоматически:

  • Регистрирует <MasonryGrid> как глобальный компонент
  • Автоимпортирует useMasonry
  • Применяет конфиг masonry выше как общие клиентские настройки по умолчанию для options каждого вызова <MasonryGrid>/useMasonry(), который сам не переопределяет конкретное поле

В отличие от типичного клиентского плагина с дефолтами, плагин этого модуля работает универсально (и на сервере, и на клиенте), а не только на клиенте — ssrColumns читается прямо функцией рендера <MasonryGrid>, которая тоже выполняется во время SSR, так что дефолты должны быть доступны и там, а не только когда движок появляется в браузере.