0.0.15 • Published 8 months ago
vue-photo-album-fork v0.0.15
Vue Photo Album
Vue Photo Album is a responsive photo gallery component for Vue 3
.
It supports rows, columns, and masonry layouts and customizable renderer components.
Inspired by Igor Danchenko / react-photo-album.
Layouts
Rows
Columns
Masonry
Install
npm install vue-photo-album
Basic Setup
<script setup>
import { ref } from 'vue'
import { PhotoAlbum } from 'vue-photo-album'
const photos = ref([
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/1080x743",
"key": "gKXKBY-C-Dk",
"width": 1080,
"height": 743,
"srcSet": [
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/640x440",
"width": 640,
"height": 440
},
{
"src": "https://source.unsplash.com/gKXKBY-C-Dk/256x176",
"width": 256,
"height": 176
}
]
},
{
"src": "https://source.unsplash.com/75715CVEJhI/1080x1513",
"key": "75715CVEJhI",
"width": 1080,
"height": 1513
"srcSet": [
{
"src": "https://source.unsplash.com/75715CVEJhI/640x896",
"width": 640,
"height": 896
},
{
"src": "https://source.unsplash.com/75715CVEJhI/256x359",
"width": 256,
"height": 359
}
]
}
])
</script>
<template>
<PhotoAlbum :photos="photos" layout="rows" />
</template>
Documentation
More details here https://tenthree.github.io/vue-photo-album