vue-chunks

Step 1: Install

yarn add vue-chunks

or

npm install vue-chunks --save

Step 2: Config @ Laravel_Project/resources/assets/js/app.js

window.Vue = require('vue');
require('vue-chunks');

or

Vue.use(require('vue-chunks'));

Step 3: Define array data, require id property in each item

data() {
    return {
        photos: [],

    }
}

Step 4A: Grid List by Bootstrap

<vue-chunks :items="photos" :columns="4" chunk-class="row mb-3" item-class="col-3">
<template slot-scope="slot">
    <div class="card">
        <img class="card-img-top" :src="slot.item.thumbnail_url" />
    </div>
</template>
</vue-chunks>

Step 4B: Card Deck by Bootstrap

<vue-chunks :items="photos" :columns="4" chunk-class="card-deck" item-class="card">
<template slot-scope="slot">
    <img class="card-img-top" :src="slot.item.thumbnail_url" />
</template>
</vue-chunks>

Step 5: Sample for Async Data Loading

loadPhotos: function() {
    let self = this;
    self.instance
        .get('/api/photos/')
        .then(function(response) {
            self.photos = response.data.data
        })
}

Sample for Output

<div class="vue-chunks">
    <div class="row mb-3">
        <div class="col-3">
            <div class="card">
                <img src="GBSg.png" class="card-img-top" 
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-3">
            <div class="card">
                <img src="k3f6.png" class="card-img-top" 
            </div>
        </div>
    </div>
</div>

Props

Name	Sample	Description
:items	photos	array fetched from API
:columns	6	column count per row
chunk-class	row mb-3	class for the outter chunk div
item-class	col-2	class for the inner item div

Suggest Props Combination

props.columns	props.item-class	description
4	col-3	4 columns in one row
3	col-4	3 columns in one row
6	col-2	6 columns in one row

References

• vue-chunks @ GitHub
• vue-chunks @ npm