{"id":17270325,"url":"https://github.com/alexiscolin/vue-colcade","last_synced_at":"2025-07-07T02:03:21.986Z","repository":{"id":48031830,"uuid":"143887096","full_name":"alexiscolin/vue-colcade","owner":"alexiscolin","description":"📐Colcade plugin for Vue.js 2 - Lightweight masonry","archived":false,"fork":false,"pushed_at":"2022-12-02T08:58:53.000Z","size":475,"stargazers_count":20,"open_issues_count":11,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T22:12:30.264Z","etag":null,"topics":["grid-layout","plugin","vuejs","wrapper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/alexiscolin.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":"2018-08-07T14:43:16.000Z","updated_at":"2023-12-01T15:44:21.000Z","dependencies_parsed_at":"2023-01-22T14:00:11.634Z","dependency_job_id":null,"html_url":"https://github.com/alexiscolin/vue-colcade","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexiscolin%2Fvue-colcade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexiscolin%2Fvue-colcade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexiscolin%2Fvue-colcade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexiscolin%2Fvue-colcade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexiscolin","download_url":"https://codeload.github.com/alexiscolin/vue-colcade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732474,"owners_count":21152851,"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":["grid-layout","plugin","vuejs","wrapper"],"created_at":"2024-10-15T08:19:18.405Z","updated_at":"2025-04-14T08:40:48.694Z","avatar_url":"https://github.com/alexiscolin.png","language":"JavaScript","funding_links":[],"categories":["UI布局","Components \u0026 Libraries","UI Layout","UI Layout [🔝](#readme)"],"sub_categories":["游览","UI Layout","Tour"],"readme":"# 📐 Vue Colcade\n\n*Lightweight masonry layout thanks to Vuejs*\n\n\n![Travis (.org)](https://travis-ci.com/alexiscolin/vue-colcade.svg?branch=master)\n![David](https://img.shields.io/david/alexiscolin/vue-colcade.svg)\n![NpmLicense](https://img.shields.io/npm/l/vue-colcade.svg)\n\nA small wrapper for integrating [Colcade](https://github.com/desandro/colcade) to Vuejs.\n\nVue.js plugin accessible globally from any component to run multiple colcade grid instances. Let's interact with differents grids throughout differents components. This plugin needs you to use the basic [Colcade configuration usage](https://github.com/desandro/colcade#usage).\n\n\u003cbr\u003e\u003cbr\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://files.jaunebleu.co/img/github/vue-colcade-3.png\" width=\"100%\"\u003e\u003c/p\u003e\n\u003cbr\u003e\n\n## Install\n\n``` bash\n  npm install vue-colcade\n  yarn add vue-colcade\n```\n\nImport vue-colcade.js in the main project file\n\n``` javascript\n  import Vue from 'vue';\n  import VueColcade from 'vue-colcade';\n\n  Vue.use(VueColcade);\n```\n\n## Usage\n\nIn your Vue.js components, to create a new grid, simply use:\n\n``` javascript\nmounted: function mounted() {\n   this.$colcade.create({\n      name: 'myGridName',  // name of colcade instance -\u003e will be used as a reference for grid instance\n      el: myGridElement,  // element that hosts the grid -\u003e as mentioned in Colcade config\n      config: {  // native Colcade configuration -\u003e as mentioned in Colcade config\n        columns: '.grid-col',\n        items: '.grid-item',\n      },\n   });\n}\n```\n\nThat grid is accessible across all components by using the new global vue property: `$colcade`. So you can create as many grids as you want, referencing them by their `name`. Every future modifications thanks to vue-colcade must referred the `name` of the instance in order to affect it. As an exemple, if you create an instance with `myGridName` as name, you can update it with the following method: `this.$colcade.update('myGridName')`.\n\n### Methods\n\n*vue-colcade* offers following methods:\n\n* **create** - `this.$colcade.create({})` - Create a new instance of Colcade grid -\u003e see usage above\n* **destroy** - `this.$colcade.destroy('myGridName')` - Destroy an instance of Colcade grid\n* **update** - `this.$colcade.update('myGridName')` - Update grid items (after changing order, removing items...)\n* **append** - `this.$colcade.myGridName.append(items)` - Add items to the end of layout\n* **prepend** - `this.$colcade.myGridName.prepend(items)` - Add items to the beginning of layout\n\nAs exemple, in order to destroy a grid, just call: `this.$colcade.destroy('myGridName')`.\n\nThen, if you need to update items values inside a colcade grid, you may call the following property in order to force Colcade to refresh itself: `this.$colcade.update('myGridName')`.\n\nAnd, all native colcade methods are still accessibles :\n\n``` javascript\n  this.$colcade.myGridName.append();\n  this.$colcade.myGridName.prepend();\n  this.$colcade.myGridName.destroy(); // be carefull, that doesn't destroy the myGridName instance but only the Colcade grid\n```\n\nBy Alexis Colin, thanks to [Colcade](https://github.com/desandro/colcade) by David DeSandro\n\n### Licence\n\nMIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexiscolin%2Fvue-colcade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexiscolin%2Fvue-colcade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexiscolin%2Fvue-colcade/lists"}