Issue: When create recursive grid (grid inside another grid), the global variable self is override by the last grid created, and all event emits are messed up due to the incorrect reference.

Is there any particular reason you assigned this to self, instead of using arrow function in all events? Assuming you were trying to avoid this from Vue to be confused by this in the functions.

I was able to resolve this issue by removing the self assignment and use arrow functions as below.
this.grid.on('synchronize', ()=> { this.$emit('synchronize') });

Hello there,

all in the title.

Glad someone ported murri for vue!

Can you give an example where I can utilize the remove event to remove elements from the list and the DOM?

Usually grid item's width and height depends on content width and height. Therefore it would be great to have a fluid item

<template>
  <div :id="id" class="item">
    <div class="item-content item-fluid">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'item-fluid',
    props: {
      id: {
        type: [Number, String],
        default: 'item-sm'
      },
      onClick: {
        type: Function,
        default (id) {
          return null
        }
      }
    }
  }
</script>

<style scoped></style>

To make it work we should set default .item to have fluid width and height:

.item {
  ...
  width: auto;
  max-width: 100%;
  height: auto;
  ...
}

The JS files in the /dist folder appear to include muuri itself as well as all other dependencies, creating a huge javascript file of ~800KB. You could add another option for people that only includes your vue components, and allows muuri and other dependencies to be installed via npm.

main.js
import VueMuuri from 'vue-muuri'
import 'vue-muuri/dist/vue-muuri.css'
Vue.use(VueMuuri)
but still Muuri is not defined

Like these:

dist/vue-muuri.css
   8:1  ×  Expected no more than 1 empty line   max-empty-lines
  11:1  ×  Expected empty line before rule      rule-empty-line-before
  21:1  ×  Expected empty line before rule      rule-empty-line-before
  24:1  ×  Expected empty line before rule      rule-empty-line-before
  27:1  ×  Expected empty line before rule      rule-empty-line-before
  30:1  ×  Expected empty line before rule      rule-empty-line-before
  39:1  ×  Expected empty line before rule      rule-empty-line-before

Hi sorry if this question sounds too stupid .
Im a beginner i just need to know how to create function to resize the item and add new item

Is this library stil up to date, anyone have a working example ?

Thanks

Currently Muurri initializes like this:

createGrid () {
  this.grid = new Muuri('#' + this.id, this.options)
  ...
}

It forces user to set id for each component (in case if there are many instances).

Instead we can refer to root element using this.$el (https://vuejs.org/v2/api/?#mounted):

createGrid () {
  this.grid = new Muuri(this.$el, this.options)
  ...
}

In Vue environment it's rarely necessary to assign id attribute to an element. Now user have to set an unique id otherwise there will be elements with the same id (e.g. grid).
To make id optional:

id: {
        type: String,
        default: null
      },

After calling npm run dev I got:

ERROR in ./test/visual.js
Module not found: Error: Can't resolve './specs' in 'E:\experiments\vue-muuri\test'
 @ ./test/visual.js 71:19-51
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./test/visual.js

OS: Windows 8.1
node: 8.7.0
npm: 5.5.1

How would 'v-for' be used with this to display items within the grid dynamically from a database? I'm having trouble getting this to work. Any advice?

Is it really necessary to add default visual styles like this?

  .item {
    // display: block;
    // position: absolute;
    margin: 5px;
    // z-index: 1;
    background: #333;
    border: 2px solid black;
    border-radius: 5px;
    padding: 15px;
    color: #fff;
    opacity: 0.9;
  }

The only way to override .item padding is

.item[data-v-6ac0860c] {
  padding: 0;
}

I think we only need styles that are required for muuri