Vue-masonry-css is a Vue.js component that provides a masonry layout powered by CSS, prioritizing fast rendering and optimal utilization of Vue's Virtual DOM. It is dependency-free, specifically avoiding external libraries like jQuery or traditional JavaScript-based masonry solutions (e.g., DeSandro Masonry) which often introduce performance overhead through double-rendering. The current stable version is 1.0.3, and it appears to follow a slow, stable release cadence given its nature as a lightweight, dependency-free UI component. Key differentiators include its responsive-by-default behavior, compatibility with IE10+ (including IE9, though this might be an outdated claim), and seamless integration with existing CSS animations. It achieves its layout using plain divs and a touch of flexbox, offering a simple interface to define columns and gutter sizes based on responsive breakpoints. Notable limitations include its inability to handle elements with varying widths within a single column and its intentional omission of height-based sorting to maintain high rendering performance.
npm install vue-masonry-cssVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to import and globally register the `vue-masonry-css` plugin, then use the `<masonry>` component in a Vue 2 template with responsive column and gutter configurations.
For Vue 3 projects, seek an alternative masonry component or consider migrating your application to Vue 2 if this component is critical. Attempting to use `Vue.use()` with `createApp` will result in errors.
Ensure all items rendered within the `<masonry>` component have consistent widths. If your layout requires variable-width items, consider a different masonry library that explicitly supports this feature.
If strict height-based sorting is a requirement for your design, this component may not be suitable. You would need to pre-sort your `items` array before passing it to the component, or explore alternative solutions that prioritize height-based placement.
Instead of `cols="{default: 4, 700: 2}"`, use `:cols="{default: 4, 700: 2}"`. Failing to bind the object will result in the object being treated as a string literal, or prop type validation errors.Ensure `import Vue from 'vue'` is present at the top of your main application file and that Vue is correctly initialized before `Vue.use()` is called, especially when using module bundlers.
Verify that `import VueMasonry from 'vue-masonry-css'` and `Vue.use(VueMasonry)` are executed in your application's entry point (e.g., `main.js` or `app.js`).
Change `cols="{ default: 4, 700: 2 }"` to `:cols="{ default: 4, 700: 2 }"` in your template. Similarly, apply this for the `gutter` prop when using an object.No dependency data recorded yet.