Registry / web-framework / vue-next-masonry

vue-next-masonry

library1.1.3jsnpmunverified

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.

web-framework

npm install vue-next-masonry

package ↗

INSTALL

IMPORT

SIG · VUE-NEXT-MASONRY

vue-next-masonry

web-frameworkjavascriptv1.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

masonry

✓ import masonry from 'vue-next-masonry';

✗ const masonry = require('vue-next-masonry');

This package is designed for ESM environments. The default export is used for global component registration via `app.use()`.

Demonstrates global registration of the masonry component and its basic usage in a Vue 3 template with dynamic item heights.

import { createApp } from 'vue'; import masonry from 'vue-next-masonry'; // Assume your root component is App.vue import App from './App.vue'; const app = createApp(App); app.use(masonry); app.mount('#app'); // In your App.vue or any other component's template: // <template> // <masonry :cols="{ default: 3, 700: 2, 500: 1 }" :gutter="20"> // <div v-for="(item, index) in 10" :key="index" class="masonry-item" :style="{ height: `${50 + Math.random() * 150}px` }"> // Item {{ item }} // </div> // </masonry> // </template> // // <style> // .masonry-item { // background-color: #f0f0f0; // border: 1px solid #ccc; // padding: 10px; // margin-bottom: 20px; /* Gutter is handled by the component, this is just for visual clarity */ // display: flex; // align-items: center; // justify-content: center; // } // </style>

Debug

Known issues

breakingThis 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.

fix

Ensure your project uses Vue 3 (minimum `vue` peer dependency is `^3.0.5`).

affects: >=1.0.0

gotchaWhen 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.

fix

Add `:resolve-slot="true"` to your `<masonry>` component when child content is provided via a slot.

affects: >=1.0.0

gotchaThe 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.

fix

Refer to the `vue-masonry-css` GitHub repository (https://github.com/paulcollett/vue-masonry-css) for comprehensive prop documentation.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: masonry

The `<masonry>` component has not been globally registered with the Vue application instance.

fix

Ensure you call `app.use(masonry)` in your main application entry point (`main.ts` or `main.js`) after creating your Vue app instance.

Items within <masonry> are not displaying in a proper grid layout; instead, they appear stacked vertically or improperly positioned when using slots.

The component is failing to correctly detect and arrange child elements passed through a default slot, often due to how Vue renders slot content.

fix

Add the prop `:resolve-slot="true"` to your `<masonry>` component if its children are being rendered via a `<slot />`.

TypeError: app.use is not a function

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.

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.

Upgrade

Version history

1.1.3latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for Vue 3 functionality.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-next-masonry ↗