Dynamic Height & Width

Using vuuri becomes more satisfying when the items you want to render each have a different height and/or width to fully leverage dynamic layouts.

You will need to implement two functions in your component so vurri can ask to retrieve the height and width based on the item being rendered.

methods: {
  getItemWidth(item) {
    return `${item.width}%`
  },
  getItemHeight(item) {
    return `${item.height}px`
  }
}

You will need to always return a formatted string with the right unit of size. For example, for percentage 33% and pixels 100px. You can obviously return rem or em;

Example

Code

<template>
  <vuuri
    v-model="items"
    :get-item-width="getItemWidth"
    :get-item-height="getItemHeight" />
    <template #item="{ item }">
      <div>
        {{ item.name }}
      </div>
    </template>
  </vuuri>
</template>

<script>
import vuuri from 'vuuri';

export default {
    components: {
        vuuri
    },
    data () {
      return {
        items: [...], // your elements to render on screen
      }
    },
    methods: {
      getItemWidth(item) {
        return `${item.width}%`
      },
      getItemHeight(item) {
        return `${item.height}px`
      }
    }
}
</script>

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