yar0d / vue-muuri

A vue plugin using Muuri's responsive, sortable, filterable and draggable grid layouts.

vue-muuri

A vue plugin using Muuri's responsive, sortable, filterable and draggable grid layouts.

Vue-muuri was created to provide an alternative option for creating a responsive dashboard in Vue. It is essentially a vue wrapper for Muuri. Using Vue's modular component system, vue-muuri allows us to drop in any number of tile components to quickly create our dashboard.

Installation

npm install --save vue-muuri

Bundler (Webpack)

import Vue from 'vue'
import VueMuuri from 'vue-muuri'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-muuri/dist/vue-muuri.css'

Vue.use(VueMuuri)

How to Use

Vue-muuri consists of a base muuri-grid component that implements the Muuri plugin. Using this component, we will be able to insert any number of item components through its slot.

Example:

    <muuri-grid id="example-grid">
      <!-- slot content -->
    </muuri-grid>

Out-of-the-box, vue-muuri comes with a few item components to get you started.

    import { ItemLink, ItemSm, ItemMd, ItemLg } from 'vue-muuri'

    <muuri-grid id="example-grid">
      <item-link id="link" text="Example Link" route="/"></item-link>
      
      <item-sm id="item-sm">
        <p>Small item.</p>
      </item-sm>
      
      <item-md id="item-md">
        <p>Medium item.</p>
      </item-md>
      
      <item-lg id="item-lg">
        <p>Large item.</p>
      </item-lg>
    </muuri-grid>

Events

Vue-muuri also allows you to listen to events on the grid object created by Muuri. Please refer to the docs for a complete list of events.

Example:

    <muuri-grid id="example-grid" @layoutEnd="updateOrder">
      <item-sm :id="'item-sm-' + index" v-for="num, index in [1,2,3,4]">
        <p>Item {{ num }}</p>
      </item-sm>
    </muuri-grid>

    // ...
    methods: {
        updateOrder (items) {
            console.log(items)
        }
    }

License

MIT