How to install vue-masonry in Vue 3?

Use version 0.14.0 or higher for straightforward import. For older versions, you need to install mitt and set it up as an event emitter, as per the README's Vue 3 usage section.

vue-masonry vs masonry.js: which is better for Vue projects?

vue-masonry is better for Vue apps as it provides a declarative API integrated with Vue directives, while masonry.js requires manual JavaScript handling. Choose vue-masonry for a more Vue-native workflow.

How to make vue-masonry layout responsive?

Use the column-width option with CSS units like percentages or media queries, and enable fit-width to adjust the container. The gutter option can also be set dynamically for spacing control.

Why does vue-masonry not work with Nuxt server-side rendering?

It requires client-side JavaScript, so for SSR, wrap components with vue-client-only and set the plugin to ssr: false in nuxt.config.js, as detailed in the NUXT implementation guide.

How to trigger a redraw when data changes in vue-masonry?

Call this.$redrawVueMasonry() in your component methods, such as in watchers or after data updates, to manually refresh the layout. Pass the container ID if using multiple instances.

Is vue-masonry compatible with Tailwind CSS?

Yes, it integrates well with Tailwind CSS, as demonstrated in the provided JSBin demo link. Apply Tailwind utility classes to tile elements for styling within the masonry grid.

vue-masonry — Vue.js Masonry Grid Directive

What is vue-masonry?

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.

Target Audience

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.

Value Proposition

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 ✅

Use Cases

Best For

Building Pinterest-style image galleries in Vue applications
Creating dynamic product grids with variable-height items
Implementing masonry layouts in Nuxt.js projects with SSR
Adding responsive masonry grids to Vue-based content feeds
Integrating masonry layouts with CSS frameworks like Tailwind CSS
Managing complex grid layouts where elements have different heights

Not Ideal For

Projects requiring full server-side rendering without any client-side JavaScript, as vue-masonry depends on the Masonry library which runs on the client.
Teams wanting pre-styled, drop-in masonry components out of the box, since it provides only layout directives and requires custom CSS for styling.
Applications with highly dynamic content needing automatic layout updates, due to the manual $redrawVueMasonry() requirement.
Developers preferring modern CSS-only solutions like Grid or Flexbox for performance, as vue-masonry adds JavaScript overhead and external dependencies.

Pros & Cons

Pros

Declarative Vue Integration

Provides v-masonry and v-masonry-tile directives for a native Vue experience, eliminating manual Masonry instance management as shown in the template examples.

Full Masonry Feature Support

Supports all key Masonry options like column-width, gutter, and stagger, allowing fine-tuned control over layouts, as detailed in the properties section.

Vue 2 and 3 Compatibility

Works with both major Vue versions, with specific integration instructions for each, including Vue 3 setup with mitt for older versions.

Nuxt SSR Readiness

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.

Cons

External Dependency Requirement

Relies on the original Masonry library being loaded separately, which complicates setup and can lead to version conflicts, as noted in the installation steps.

Manual Redraw Necessary

Developers must explicitly call $redrawVueMasonry() for layout updates when content changes, which is error-prone and adds maintenance overhead.

Complex Vue 3 Setup

For versions earlier than 0.14.0, Vue 3 integration requires additional configuration with the mitt package, increasing setup complexity and potential for misconfiguration.

Breaking Changes History

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.

Frequently Asked Questions

What is vue-masonry?

Target Audience

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.

Value Proposition

Use Cases

Best For

Building Pinterest-style image galleries in Vue applications
Creating dynamic product grids with variable-height items
Implementing masonry layouts in Nuxt.js projects with SSR
Adding responsive masonry grids to Vue-based content feeds
Integrating masonry layouts with CSS frameworks like Tailwind CSS
Managing complex grid layouts where elements have different heights

Not Ideal For

Projects requiring full server-side rendering without any client-side JavaScript, as vue-masonry depends on the Masonry library which runs on the client.
Teams wanting pre-styled, drop-in masonry components out of the box, since it provides only layout directives and requires custom CSS for styling.
Applications with highly dynamic content needing automatic layout updates, due to the manual $redrawVueMasonry() requirement.
Developers preferring modern CSS-only solutions like Grid or Flexbox for performance, as vue-masonry adds JavaScript overhead and external dependencies.

Pros & Cons

Pros

Declarative Vue Integration

Provides v-masonry and v-masonry-tile directives for a native Vue experience, eliminating manual Masonry instance management as shown in the template examples.

Full Masonry Feature Support

Supports all key Masonry options like column-width, gutter, and stagger, allowing fine-tuned control over layouts, as detailed in the properties section.

Vue 2 and 3 Compatibility

Works with both major Vue versions, with specific integration instructions for each, including Vue 3 setup with mitt for older versions.

Nuxt SSR Readiness

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.

Cons

External Dependency Requirement

Relies on the original Masonry library being loaded separately, which complicates setup and can lead to version conflicts, as noted in the installation steps.

Manual Redraw Necessary

Developers must explicitly call $redrawVueMasonry() for layout updates when content changes, which is error-prone and adds maintenance overhead.

Complex Vue 3 Setup

For versions earlier than 0.14.0, Vue 3 integration requires additional configuration with the mitt package, increasing setup complexity and potential for misconfiguration.

Breaking Changes History

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.

Frequently Asked Questions

vue-masonry

What is vue-masonry?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

vue-masonry

What is vue-masonry?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?