VueCraft NPM

Nuxt Module ​

Wraps @macrulez/masonry-kit-vue for Nuxt — auto-imports <MasonryGrid> and useMasonry, and seeds their shared client-side option defaults from nuxt.config.ts.

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

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

Configuration ​

Every field mirrors a MasonryOptions field (see Engine API, Animations, and SSR Rendering) and falls through to the exact same default when left unset — the module deliberately never hardcodes a default of its own, so a future change to core's default is never silently shadowed by the Nuxt layer.

direction ​

'vertical' | 'horizontal' · default: follows MasonryOptions.direction

columns ​

LaneSpec · default: follows MasonryOptions.columns

rows ​

LaneSpec · default: follows MasonryOptions.rows

minLaneSize ​

number · default: follows MasonryOptions.minLaneSize

gap ​

number | { main?: number; cross?: number } · default: follows MasonryOptions.gap

placement ​

'balanced' | 'ordered' · default: follows MasonryOptions.placement

animate ​

boolean · default: follows MasonryOptions.animate

transitionDuration ​

number · default: follows MasonryOptions.transitionDuration

transitionEasing ​

string · default: follows MasonryOptions.transitionEasing

ssrColumns ​

number · default: follows MasonryOptions.ssrColumns

Not covered by module options (set these directly on <MasonryGrid :options="...">/useMasonry() instead — there is no shared-default mechanism for them): virtualize, scrollContainer, estimateSize.

Example — every option at once:

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

  masonry: {
    direction: 'vertical', // columns; 'horizontal' would pack into rows instead
    columns: { default: 2, 768: 3, 1200: 4 }, // breakpoints, same shape MasonryOptions.columns accepts directly
    minLaneSize: 240, // only consulted if columns were 'auto' instead
    gap: { main: 20, cross: 16 }, // 20px between stacked items, 16px between lanes
    placement: 'balanced', // least-filled lane wins, not strict round-robin
    animate: true, // FLIP-animate reflow — the default, explicit here for clarity
    transitionDuration: 300, // slightly slower than the 250ms default
    transitionEasing: 'ease-out', // a plain easing keyword instead of the default cubic-bezier
    ssrColumns: 3, // pre-hydration CSS-columns approximation uses 3 columns
  },
})

Registration ​

The module automatically:

  • Registers <MasonryGrid> as a global component
  • Auto-imports useMasonry
  • Applies the masonry config above as the shared client-side default options for every <MasonryGrid>/useMasonry() call that doesn't override a given field itself

Unlike a typical client-only defaults plugin, this module's plugin runs universally (on both server and client), not client-only — ssrColumns is read directly by <MasonryGrid>'s render function, which also runs during SSR, so the defaults need to be available there too, not just once the engine exists in the browser.