{"id":12534,"library":"vue-next-masonry","title":"Vue 3 Masonry Layout Component","description":"vue-next-masonry is a UI component library offering a responsive masonry layout for Vue 3 applications. It functions as a direct port of the well-established `vue-masonry-css` library, specifically adapted for the Vue 3 composition API and ecosystem. The current stable version is 1.1.3, indicating ongoing maintenance and compatibility with recent Vue 3 releases. Its release cadence appears to be driven by bug fixes, minor enhancements, and alignment with Vue 3's evolution rather than a strict schedule. A key differentiator is its seamless integration into Vue 3 projects for developers familiar with the Vue 2 `vue-masonry-css` component, providing a familiar API while leveraging Vue 3's performance improvements. It aims to provide an easy-to-use `<masonry>` component that automatically arranges child elements into a grid with variable column heights, optimizing space and improving visual presentation for galleries, portfolios, and lists.","status":"active","version":"1.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/DaPotatoMan/vue-next-masonry","tags":["javascript","vue","masonry","typescript"],"install":[{"cmd":"npm install vue-next-masonry","lang":"bash","label":"npm"},{"cmd":"yarn add vue-next-masonry","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-next-masonry","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue 3 functionality.","package":"vue","optional":false}],"imports":[{"note":"This package is designed for ESM environments. The default export is used for global component registration via `app.use()`.","wrong":"const masonry = require('vue-next-masonry');","symbol":"masonry","correct":"import masonry from 'vue-next-masonry';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport masonry from 'vue-next-masonry';\n\n// Assume your root component is App.vue\nimport App from './App.vue';\n\nconst app = createApp(App);\n\napp.use(masonry);\n\napp.mount('#app');\n\n// In your App.vue or any other component's template:\n// <template>\n//   <masonry :cols=\"{ default: 3, 700: 2, 500: 1 }\" :gutter=\"20\">\n//     <div v-for=\"(item, index) in 10\" :key=\"index\" class=\"masonry-item\" :style=\"{ height: `${50 + Math.random() * 150}px` }\">\n//       Item {{ item }}\n//     </div>\n//   </masonry>\n// </template>\n//\n// <style>\n// .masonry-item {\n//   background-color: #f0f0f0;\n//   border: 1px solid #ccc;\n//   padding: 10px;\n//   margin-bottom: 20px; /* Gutter is handled by the component, this is just for visual clarity */\n//   display: flex;\n//   align-items: center;\n//   justify-content: center;\n// }\n// </style>","lang":"typescript","description":"Demonstrates global registration of the masonry component and its basic usage in a Vue 3 template with dynamic item heights."},"warnings":[{"fix":"Ensure your project uses Vue 3 (minimum `vue` peer dependency is `^3.0.5`).","message":"This package is exclusively built for Vue 3. It is not backward compatible with Vue 2 applications and will lead to errors if used in a Vue 2 project.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add `:resolve-slot=\"true\"` to your `<masonry>` component when child content is provided via a slot.","message":"When dynamically rendering child items through a `<slot />`, the `:resolve-slot=\"true\"` prop is required on the `<masonry>` component for the layout to correctly detect and arrange these items.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the `vue-masonry-css` GitHub repository (https://github.com/paulcollett/vue-masonry-css) for comprehensive prop documentation.","message":"The component's configuration props (e.g., `cols`, `gutter`) and their behavior are largely inherited from `vue-masonry-css`. Developers should consult the documentation for the original `vue-masonry-css` project for detailed prop usage and examples.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you call `app.use(masonry)` in your main application entry point (`main.ts` or `main.js`) after creating your Vue app instance.","cause":"The `<masonry>` component has not been globally registered with the Vue application instance.","error":"[Vue warn]: Failed to resolve component: masonry"},{"fix":"Add the prop `:resolve-slot=\"true\"` to your `<masonry>` component if its children are being rendered via a `<slot />`.","cause":"The component is failing to correctly detect and arrange child elements passed through a default slot, often due to how Vue renders slot content.","error":"Items within <masonry> are not displaying in a proper grid layout; instead, they appear stacked vertically or improperly positioned when using slots."},{"fix":"Verify that you are importing `createApp` from 'vue' and using it to initialize your application, and that your project dependencies correctly specify Vue 3.","cause":"This error typically indicates that `app` is not a Vue 3 application instance, or you are attempting to use Vue 3's `use` method in a Vue 2 project.","error":"TypeError: app.use is not a function"}],"ecosystem":"npm"}