Vuuri

# Basic Usage

# Minimal Config

You can quickly start using vuuri with the minimal configuration below:

<template>
  <vuuri v-model="items" />
</template>

<script>
import vuuri from 'vuuri';

export default {
    components: { 
        vuuri
    },
    data () {
      return {
        items: [...], // your elements to render on screen
      }
    }
}
</script>

<style scoped lang="scss">
</style>

# Required Slot

You will need to implement the required slot #item, in order to display your content as there is no fallback if the slot is not implemented.

<vuuri v-model="items">
  <template #item="{ item }">
    /* your custom markup here */
    <YourCustomComponent :model="item" />
  </template>
</vuuri>

# Enable Dragging

Simply add the drag-enabled attriute to the vuuri component.

<vuuri v-model="items" drag-enabled>
</vuuri>

# Automatic Adds and Deletes

You simply need to worry about writing javascript when adding or removing elements in the grid. vuuri figures out what you did in the items array to do the right update.

// adding
this.items.push(new Item());

// removing
const index = this.items.findIndex((value) => value.id === item.id);
this.items.splice(index, 1);

# Automatic Updates Between Groups

When moving elements between different vuuri groups, vuuri makes sure your model is always up to date for you.


# Using className

If you need to add a custom CSS class to the muuri grid, you can pass it via the class-name prop:

<template>
  <vuuri :class-name="my-custom-css-class-name" />
</template>

<script>
  // [...]
</script>

<style>
  .my-custom-css-class-name {
    /* your special styles */
  }
</style>

A good use case to use this would be when you have multiple vuuri grids on the same page and each of them need different styles.

# Using itemKey

You can provide the identifier of each object contained in the array. If not provided, one will be created for you for each item. This prop is used for the v-for's :key directive inside vuuri.

<template>
  <vuuri
    v-model="items"
    item-key="id" />
    <template #item="{ item }">
      <div>
        {{ item.name }}
      </div>
    </template>
  </vuuri>
</template>

<script>
import vuuri from 'vuuri';

export default {
    components: {
        vuuri
    },
    data () {
      return {
        items: [
          {
            id: 1,
            name: 'Foo'
          },
          {
            id: 2,
            name: 'Bar'
          },
        ],
      }
    },
}
</script>

# Override CSS styles

<style scoped lang="scss">
  /deep/ {
    .muuri-grid {
      /* any styles to add on the muuri grid */
    }
    .muuri-item {
      /* any styles to add on the item container */
      /* only to override positioning */
      .muuri-item-content {
        /* add any markup you like */      
      }
      &.muuri-item-dragging {}
      &.muuri-item-releasing {}
      &.muuri-item-hidden {}
    }
    .muuri-item-placeholder {
      /* shadow element behind the dragging element */
    }
  }
</style>

← Groups →