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