Gallery.vue

<template>
<div class="gallery flex justify-center flex-wrap pull-out-both">
    <div class="w-1/3 p-4" :key="key" v-for="(img, key) in images">
        <div class="h-64 overflow-hidden rounded-lg shadow-lg">
            <a :href="imageDir + key.substr(1)" class="block" target="_blank">
                <img :src="imageDir + key.substr(1)" class="w-full h-64 object-cover">
            </a>
        </div>
    </div>
</div>
</template>

<script>
export default {
props: [
    'source', 
    'lightbox'
],
data() {
    return {
    imageDir: "../../media/tutorials/unubo/", // you know this already just from directory structure
    images: {}
    }
},
mounted() {
    this.importAll(require.context('../../media/tutorials/unubo/', true, /\.jpg$/))
},
methods: {
    importAll(r) {
    var imgs = {}
    r.keys().forEach(key => (imgs[key] = r(key)))
    this.images = imgs
    }
}
}
</script>