A Vue.js directive for creating masonry grid layouts using the Masonry library.
vue-masonry is a Vue.js plugin that provides directives for creating masonry grid layouts. It wraps the Masonry JavaScript library to offer a Vue-friendly way to build dynamic, Pinterest-style layouts where elements are arranged in an optimal vertical flow based on available space.
Vue.js developers who need to implement masonry grid layouts in their applications, particularly those building image galleries, product grids, or content feeds with variable-height items.
Developers choose vue-masonry because it provides a declarative, Vue-native API for masonry layouts while maintaining full compatibility with the original Masonry library's features, eliminating the need to manually manage Masonry instances in Vue components.
💠 Vue.js directive for masonry blocks layouting ✅
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Provides v-masonry and v-masonry-tile directives for a native Vue experience, eliminating manual Masonry instance management as shown in the template examples.
Supports all key Masonry options like column-width, gutter, and stagger, allowing fine-tuned control over layouts, as detailed in the properties section.
Works with both major Vue versions, with specific integration instructions for each, including Vue 3 setup with mitt for older versions.
Includes clear guidance for server-side rendering with Nuxt using vue-client-only, making it viable for SSR projects, as outlined in the NUXT section.
Relies on the original Masonry library being loaded separately, which complicates setup and can lead to version conflicts, as noted in the installation steps.
Developers must explicitly call $redrawVueMasonry() for layout updates when content changes, which is error-prone and adds maintenance overhead.
For versions earlier than 0.14.0, Vue 3 integration requires additional configuration with the mitt package, increasing setup complexity and potential for misconfiguration.
Has experienced API instability, such as the method change from Vue.redrawVueMasonry() to this.$redrawVueMasonry(), which can break existing codebases, as mentioned in known issues.