{"id":16982556,"url":"https://github.com/romancow/v-masonry","last_synced_at":"2026-05-07T01:37:16.385Z","repository":{"id":43775300,"uuid":"451967241","full_name":"romancow/v-masonry","owner":"romancow","description":"The Masonry cascading grid layout library as a Vue  directive or component","archived":false,"fork":false,"pushed_at":"2022-04-20T22:06:15.000Z","size":106,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T14:08:22.965Z","etag":null,"topics":["cascade","component","directive","grid","layout","masonry","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romancow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-25T17:03:57.000Z","updated_at":"2022-02-10T20:14:00.000Z","dependencies_parsed_at":"2022-08-03T04:30:50.233Z","dependency_job_id":null,"html_url":"https://github.com/romancow/v-masonry","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/romancow/v-masonry","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romancow%2Fv-masonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romancow%2Fv-masonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romancow%2Fv-masonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romancow%2Fv-masonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romancow","download_url":"https://codeload.github.com/romancow/v-masonry/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romancow%2Fv-masonry/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261304268,"owners_count":23138300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cascade","component","directive","grid","layout","masonry","vue"],"created_at":"2024-10-14T02:08:41.516Z","updated_at":"2026-05-07T01:37:11.360Z","avatar_url":"https://github.com/romancow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-masonry\nThe [Masonry cascading grid layout library](https://masonry.desandro.com/) as a Vue directive and component.\n\n## Peer Dependenices\n- [vue](https://www.npmjs.com/package/vue)\n\n```\nnpm install vue\n```\n\n## Installation\n\nAdd a scope mapping for the GitHub npm package manager by adding a `.npmrc` file with the line:\n```\n@romancow:registry=https://npm.pkg.github.com/\n```\n\nThen install the package:\n```\nnpm install @romancow/v-masonry\n```\nor\n```\nyarn add @romancow/v-masonry\n```\n\nMore info on using the GitHub npm package registry [here](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry#installing-a-package).\n\n## Usage\n\nv-masonry can be used as either a Vue directive or a Vue component (or both, I guess if that's what you want). Both methods provide different advantages. The directive can give you a lot more control of the markup, while the component provides slots that can be a lot easier with less \"plumbing\".\n\nImport just the directive like `import masonry from '@romancow/v-masonry/directive'`.\n\nImport just the componet like `import VMasonry from '@romancow/v-masonry/component'`.\n\nAnd you can import both together like `import { masonry, VMasonry } from '@romancow/v-masonry'`.\n\n### Using As A Directive\n\n#### Basic Example\n\n```javascript\nimport masonry from '@romancow/v-masonry/directive'\n\nnew Vue({\n\tdirectives: { masonry },\n\tel: '#app',\n\tdata: {\n\t\titems: [\"one\", \"two\", \"three\", \"four\"]\n\t}\n})\n```\n\n```html\n\u003cdiv id=\"app\"\u003e\n\t\u003cdiv v-masonry\u003e\n\t\t\u003cdiv v-for=\"item in items\"\u003e{{ item }}\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Options\n\n\u003c!-- The [Masonry options](https://masonry.desandro.com/options.html) can be set as either the directive value or as modifiers (if it's a boolean option). --\u003e\n\nYou can pass a [Masonry options](https://masonry.desandro.com/options.html) object as the directive's value:\n\n```html\n\u003cdiv v-masonry=\"{ itemSelector: '.v-masonry-item', columnWidth: 80, stamp: '.v-masonry-stamp' }\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nThe options object can also come from Vue data or a computed value:\n\n```javascript\nnew Vue({\n\tdirectives: { masonry },\n\tel: '#app',\n\tdata: {\n\t\toptions: { itemSelector: \".v-masonry-item\", columnWidth: 80, stamp: \".v-masonry-stamp\" }\n\t}\n})\n```\n\n```html\n\u003cdiv v-masonry=\"options\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nIf the directive's value is a `string`, then this is used as the [`itemSelector`](https://masonry.desandro.com/options.html#itemselector) option:\n\n```html\n\u003cdiv v-masonry=\"'.v-masonry-item'\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nIf the directive's value is a `number`, then this is used as the [`columnWidth`](https://masonry.desandro.com/options.html#columnwidth) option:\n\n```html\n\u003cdiv v-masonry=\"80\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nIf the directive's value is a `boolean`, then it can be used to enable (`true`) or disable (`false`) masonry.\n\nIn addition to setting options using the directive's value, you can also set boolean options as modifiers using kebab-case versions of the option name: \n\n```html\n\u003cdiv v-masonry.horizontal-order.percent-position=\"'.v-masonry-item'\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nIn addition to existing boolean Masonry options, there are a few extras provided as modifiers for options that are already `true` by default:\n\n- `origin-right`: sets `originLeft` to `false`\n- `origin-bottom`: sets `originTop` to `false`\n- `no-resize`: sets `resize` to `false`\n\n```html\n\u003cdiv v-masonry.origin-right.origin-bottom.no-resize=\"'.v-masonry-item'\"\u003e\n\t...\n\u003c/div\u003e\n```\n\n#### Events\n\nv-masonry provides access to the [Masonry events](https://masonry.desandro.com/events.html#masonry-events) by allowing you to pass their handlers as an `on` option in the directive's value:\n\n```html\n\u003cdiv v-masonry=\"{ itemSelector: '.v-masonry-item', on: { layoutComplete: eventHandler }}\"\u003e\n\t...\n\u003c/div\u003e\n```\n\nIn addition to the two standard Masonry events ([`layoutComplete`](https://masonry.desandro.com/events.html#layoutcomplete) \u0026 [`removeComplete`](https://masonry.desandro.com/events.html#removecomplete)), v-masonry also provides the `created` and `destroyed` events for when the directive creates a new Masonry instance or destroys one. Each of these handlers will receive the created/destroyed Masonry instance as it's one argument.\n\n### Using As A Component\n\n#### Basic Example\n\n```javascript\nimport VMasonry from '@romancow/v-masonry/component'\n\nnew Vue({\n\tcomponents: { VMasonry },\n\tel: '#app',\n\tdata: {\n\t\titems: [\"one\", \"two\", \"three\", \"four\"]\n\t}\n})\n```\n\n```html\n\u003cdiv id=\"app\"\u003e\n\t\u003cv-masonry :items=\"items\"\u003e\n\t\t\u003ctemplate #item=\"{ item }\"\u003e\n\t\t\t\u003cdiv\u003e{{ item }}\u003c/div\u003e\n\t\t\u003ctemplate\u003e\n\n\t\t\u003ctemplate #empty\u003e\n\t\t\t\u003cp\u003eThere are no items to show.\u003cp\u003e\n\t\t\u003c/template\u003e\n\t\u003c/v-masonry\u003e\n\u003c/div\u003e\n```\n\n#### Options\n\nAll [Masonry Options](https://masonry.desandro.com/options.html) correspond to [Vue component props](https://vuejs.org/v2/guide/components-props.html):\n\n```html\n\u003cv-masonry :items=\"items\" itemSelector=\".v-masonry-item\" :columnWidth=\"80\" stamp=\".v-masonry-stamp\"\u003e\n\t...\n\u003c/v-masonry\u003e\n```\n\nThere are also a few additional props that provide `false` values for existing Masonry options that have a default `true` value:\n\n- `origin-right`: sets `originLeft` to `false`\n- `origin-bottom`: sets `originTop` to `false`\n- `no-resize`: sets `resize` to `false`\n\n```html\n\u003cv-masonry origin-right origin-bottom no-resize\u003e\n\t...\n\u003c/v-masonry\u003e\n```\n\nAnd you can set the `disabled` (`boolean`) prop to turn Masonry \"on\" or \"off\":\n\n```javascript\nnew Vue({\n\tcomponents: { VMasonry },\n\tdata: {\n\t\tuseMasonry: true\n\t},\n\tmethods: {\n\t\ttoggleUse() {\n\t\t\tthis.useMasonry = !this.useMasonry\n\t\t}\n\t}\n})\n```\n\n```html\n\u003cbutton @click=\"toggleUse\"\u003eToggle\u003c/button\u003e\n\u003cv-masonry :disabled=\"useMasonry\"\u003e\n\t...\n\u003c/v-masonry\u003e\n```\n\n#### Events\n\n[Masonry events](https://masonry.desandro.com/events.html) are mapped as kebab-cased [Vue component events](https://vuejs.org/v2/guide/events.html).\n\n```html\n\u003cv-masonry @layout-complete=\"eventHandler\"\u003e\n\t...\n\u003c/v-masonry\u003e\n```\n\nIn addition to the two standard Masonry events ([`layoutComplete`](https://masonry.desandro.com/events.html#layoutcomplete) \u0026 [`removeComplete`](https://masonry.desandro.com/events.html#removecomplete)), v-masonry also provides `created` and `destroyed` events, emitted when the component creates a new Masonry instance or destroys one. Each of these pass the created/destroyed Masonry instance as it's one argument:\n\n```javascript\nnew Vue({\n\tcomponents: { VMasonry },\n\tdata: {\n\t\tmasonryInstance: null\n\t},\n\tmethods: {\n\t\tinstanceCreated(instance) {\n\t\t\tthis.masonryInstance = instance\n\t\t}\n\t}\n})\n```\n\n```html\n\u003cv-masonry @created=\"instanceCreated\"\u003e\n\t...\n\u003c/v-masonry\u003e\n```\n\n#### Slots\n\nThe VMasonry component provides several slots to easily do common things:\n\n##### item\n\nUsed to render the child elements that will be used as item elements in the layout.\n\n```html\n\u003cv-masonry :items=\"items\"\u003e\n\t\u003ctemplate #item=\"{ item, index }\"\u003e\n\t\t\u003cdiv :class=\"{ purple: item.isPurple }\"\u003e\n\t\t\t\u003cp\u003eName: {{ item.name }}\u003c/p\u003e\n\t\t\t\u003cp\u003eIndex: {{ index }}\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/template\u003e\n\u003c/v-masonry\u003e\n```\n\n##### empty\n\nRendered in place of `#item` if the component's `items` property is empty.\n\n```html\n\u003cv-masonry :items=\"items\"\u003e\n\t\u003ctemplate #item=\"{ item }\"\u003e\n\t\t...\n\t\u003c/template\u003e\n\n\t\u003ctemplate #empty\u003e\n\t\t\u003cdiv\u003eSorry, we're all out of items.\u003c/div\u003e\n\t\u003c/template\u003e\n\u003c/v-masonry\u003e\n```\n\n##### stamp\n\nElements in this slot are elements that will be [\"stamped\"](https://masonry.desandro.com/options.html#stamp) within the layout.\n\n```html\n\u003cv-masonry :items=\"items\"\u003e\n\t\u003ctemplate #item=\"{ item }\"\u003e\n\t\t...\n\t\u003c/template\u003e\n\n\t\u003ctemplate #stamp=\"{ items }\"\u003e\n\t\t\u003cdiv\u003eThis is stamped\u003c/div\u003e\n\t\t\u003cdiv\u003eThere are {{ items.length }} items\u003c/div\u003e\n\t\u003c/template\u003e\n\u003c/v-masonry\u003e\n```\n\n##### prepend\n\nStatic elements that will be rendered before `#items`, `#empty`, or `#stamp`.\n\n```html\n\u003cv-masonry :items=\"items\"\u003e\n\t\u003ctemplate #prepend=\"{ items }\"\u003e\n\t\t\u003cdiv\u003eThere are {{ items.length }} items\u003c/div\u003e\n\t\u003c/template\u003e\n\n\t\u003ctemplate #item=\"{ item }\"\u003e\n\t\t...\n\t\u003c/template\u003e\n\u003c/v-masonry\u003e\n```\n\n##### append\n\nStatic elements that will be rendered after `#items`, `#empty`, or `#stamp`.\n\n```html\n\u003cv-masonry :items=\"items\"\u003e\n\t\u003ctemplate #item=\"{ item }\"\u003e\n\t\t...\n\t\u003c/template\u003e\n\n\t\u003ctemplate #append=\"{ items }\"\u003e\n\t\t\u003cdiv\u003eThere are {{ items.length }} items\u003c/div\u003e\n\t\u003c/template\u003e\n\u003c/v-masonry\u003e\n```\n\n##### default\n\nIf a deafult slot is specified, it's contents will override all other slots as the contents within the Masonry instance's root node, allowing you to comletely customize its contents. You can use the default item selector class `v-masonry-item` and the default stamp class `v-masonry-stamp`, or specify your own with the [`itemSelector`](https://masonry.desandro.com/options.html#itemselector) and [`stamp`](https://masonry.desandro.com/options.html#stamp) options.\n\n```html\n\u003cv-masonry\u003e\n\t\u003cdiv class=\"v-masonry-stamp\"\u003eThere are {{ items.length }} items\u003c/div\u003e\n\n\t\u003cdiv v-for=\"item in items\" class=\"v-masonry-item\" :class=\"{ purple: item.isPurple }\"\u003e\n\t\t\u003cp\u003eName: {{ item.name }}\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/v-masonry\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromancow%2Fv-masonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromancow%2Fv-masonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromancow%2Fv-masonry/lists"}