https://github.com/alexiscolin/vue-colcade

📐Colcade plugin for Vue.js 2 - Lightweight masonry
https://github.com/alexiscolin/vue-colcade

grid-layout plugin vuejs wrapper

Last synced: 7 days ago
JSON representation

📐Colcade plugin for Vue.js 2 - Lightweight masonry

• Host: GitHub
• URL: https://github.com/alexiscolin/vue-colcade
• Owner: alexiscolin
• License: mit
• Created: 2018-08-07T14:43:16.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T08:58:53.000Z (almost 2 years ago)
• Last Synced: 2024-11-03T06:33:39.057Z (12 days ago)
• Topics: grid-layout, plugin, vuejs, wrapper
• Language: JavaScript
• Homepage:
• Size: 464 KB
• Stars: 20
• Watchers: 2
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📐 Vue Colcade

*Lightweight masonry layout thanks to Vuejs*

![Travis (.org)](https://travis-ci.com/alexiscolin/vue-colcade.svg?branch=master)

![David](https://img.shields.io/david/alexiscolin/vue-colcade.svg)

![NpmLicense](https://img.shields.io/npm/l/vue-colcade.svg)

A small wrapper for integrating [Colcade](https://github.com/desandro/colcade) to Vuejs.

Vue.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).










## Install

``` bash

  npm install vue-colcade

  yarn add vue-colcade

```

Import vue-colcade.js in the main project file

``` javascript

  import Vue from 'vue';

  import VueColcade from 'vue-colcade';

  Vue.use(VueColcade);

```

## Usage

In your Vue.js components, to create a new grid, simply use:

``` javascript

mounted: function mounted() {

   this.$colcade.create({

      name: 'myGridName',  // name of colcade instance -> will be used as a reference for grid instance

      el: myGridElement,  // element that hosts the grid -> as mentioned in Colcade config

      config: {  // native Colcade configuration -> as mentioned in Colcade config

        columns: '.grid-col',

        items: '.grid-item',

      },

   });

}

```

That 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')`.

### Methods

*vue-colcade* offers following methods:

* **create** - `this.$colcade.create({})` - Create a new instance of Colcade grid -> see usage above

* **destroy** - `this.$colcade.destroy('myGridName')` - Destroy an instance of Colcade grid

* **update** - `this.$colcade.update('myGridName')` - Update grid items (after changing order, removing items...)

* **append** - `this.$colcade.myGridName.append(items)` - Add items to the end of layout

* **prepend** - `this.$colcade.myGridName.prepend(items)` - Add items to the beginning of layout

As exemple, in order to destroy a grid, just call: `this.$colcade.destroy('myGridName')`.

Then, 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')`.

And, all native colcade methods are still accessibles :

``` javascript

  this.$colcade.myGridName.append();

  this.$colcade.myGridName.prepend();

  this.$colcade.myGridName.destroy(); // be carefull, that doesn't destroy the myGridName instance but only the Colcade grid

```

By Alexis Colin, thanks to [Colcade](https://github.com/desandro/colcade) by David DeSandro

### Licence

MIT License.