The component is simple to use, it needs a list of elements to work and a little bit of additional style. The list can be a series of numbers which represent the aspect ratio of the boxes or a list of objects with mandatory width and height properties.

Basic use

The first example show the very basic use, with an array of aspect ratios.

<VueJustifiedLayout :items="[0.3, 0.6, 0.4, 0.6]" />
  background-color: whitesmoke;
  width: 100%;

    background-color: #26a69a;
    background-color: #81c784;

Custom template

You can customize the content of the rendered boxes. For example if you want to display a list of images and have some custom logic in it.

In this case the component provide a named slot called inner to add custom templates to the boxes and expose the current item as slot scope.

<vue-justified-layout :items="images" v-slot="{item, style, index}">
  <img :src="item.url" />

Than create a list of images with mandatory sizes and any additional property such as url as in the example, you will be able to access it inside the slot scope.

Remember that width and height properties are mandatory when using an array of objects

export default {
  data () {
    return {
      images: [{
        width: 250,
        height: 400,
        url: ',blue'
      }, {
        width: 600,
        height: 400,
        url: ',blue'