Get Started

INFO

First, this package is not an original creation. While working on a previous Next.js website project, I discovered and utilized the handy 👍 react-photo-album package, which perfectly met my requirements. However, I did not find a corresponding package for Vue.js. Therefore, drawing inspiration from that project, I extensively referenced and adapted it to the Vue.js ecosystem. This adaptation allows me to seamlessly implement similar functionalities in Vue3 projects. Much appreciation to the original author of the package, Igor Danchenko.

Installation

bash

npm install vue-photo-album

Register Component

Global

// Global registration
import VuePhotoAlbum from 'vue-photo-album'

createApp()
  .use(VuePhotoAlbum)
  .mount('#app')

Local

vue

<script setup>
// Local registration
import { PhotoAlbum } from 'vue-photo-album'
</script>

Photos Data

Type

type Image = {
  src: string
  width: number
  height: number
}

type Photo = Image & {
  key?: string
  alt?: string
  title?: string
  srcSet?: Image[]
}

photos.json

json

[
  {
    "src": "https://source.unsplash.com/gKXKBY-C-Dk/1920x1321",
    "key": "gKXKBY-C-Dk",
    "width": 1920,
    "height": 1321,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/1080x743",
        "width": 1080,
        "height": 743
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/640x440",
        "width": 640,
        "height": 440
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/384x264",
        "width": 384,
        "height": 264
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/256x176",
        "width": 256,
        "height": 176
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/128x88",
        "width": 128,
        "height": 88
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/96x66",
        "width": 96,
        "height": 66
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/64x44",
        "width": 64,
        "height": 44
      },
      {
        "src": "https://source.unsplash.com/gKXKBY-C-Dk/48x33",
        "width": 48,
        "height": 33
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/75715CVEJhI/771x1080",
    "key": "75715CVEJhI",
    "width": 771,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/75715CVEJhI/1080x1513",
        "width": 1080,
        "height": 1513
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/640x896",
        "width": 640,
        "height": 896
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/384x538",
        "width": 384,
        "height": 538
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/256x359",
        "width": 256,
        "height": 359
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/128x179",
        "width": 128,
        "height": 179
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/96x134",
        "width": 96,
        "height": 134
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/64x90",
        "width": 64,
        "height": 90
      },
      {
        "src": "https://source.unsplash.com/75715CVEJhI/48x67",
        "width": 48,
        "height": 67
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/mJaD10XeD7w/810x1080",
    "key": "mJaD10XeD7w",
    "width": 810,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/1080x1440",
        "width": 1080,
        "height": 1440
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/640x853",
        "width": 640,
        "height": 853
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/384x512",
        "width": 384,
        "height": 512
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/256x341",
        "width": 256,
        "height": 341
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/128x171",
        "width": 128,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/96x128",
        "width": 96,
        "height": 128
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/64x85",
        "width": 64,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/mJaD10XeD7w/48x64",
        "width": 48,
        "height": 64
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/yMSecCHsIBc/810x1080",
    "key": "yMSecCHsIBc",
    "width": 810,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/1080x1440",
        "width": 1080,
        "height": 1440
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/640x853",
        "width": 640,
        "height": 853
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/384x512",
        "width": 384,
        "height": 512
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/256x341",
        "width": 256,
        "height": 341
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/128x171",
        "width": 128,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/96x128",
        "width": 96,
        "height": 128
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/64x85",
        "width": 64,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/yMSecCHsIBc/48x64",
        "width": 48,
        "height": 64
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/CEx86maLUSc/720x1080",
    "key": "CEx86maLUSc",
    "width": 720,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/1080x1620",
        "width": 1080,
        "height": 1620
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/640x960",
        "width": 640,
        "height": 960
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/384x576",
        "width": 384,
        "height": 576
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/256x384",
        "width": 256,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/CEx86maLUSc/48x72",
        "width": 48,
        "height": 72
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/rW-I87aPY5Y/720x1080",
    "key": "rW-I87aPY5Y",
    "width": 720,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/1080x1620",
        "width": 1080,
        "height": 1620
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/640x960",
        "width": 640,
        "height": 960
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/384x576",
        "width": 384,
        "height": 576
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/256x384",
        "width": 256,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/rW-I87aPY5Y/48x72",
        "width": 48,
        "height": 72
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/ZCHj_2lJP00/720x1080",
    "key": "ZCHj_2lJP00",
    "width": 720,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/1080x1620",
        "width": 1080,
        "height": 1620
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/640x960",
        "width": 640,
        "height": 960
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/384x576",
        "width": 384,
        "height": 576
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/256x384",
        "width": 256,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/ZCHj_2lJP00/48x72",
        "width": 48,
        "height": 72
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/p6yH8VmGqxo/1080x1080",
    "key": "p6yH8VmGqxo",
    "width": 1080,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/1080x1080",
        "width": 1080,
        "height": 1080
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/640x640",
        "width": 640,
        "height": 640
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/384x384",
        "width": 384,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/256x256",
        "width": 256,
        "height": 256
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/128x128",
        "width": 128,
        "height": 128
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/96x96",
        "width": 96,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/64x64",
        "width": 64,
        "height": 64
      },
      {
        "src": "https://source.unsplash.com/p6yH8VmGqxo/48x48",
        "width": 48,
        "height": 48
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/Tn8DLxwuDMA/558x1080",
    "key": "Tn8DLxwuDMA",
    "width": 558,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/1080x2090",
        "width": 1080,
        "height": 2090
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/640x1239",
        "width": 640,
        "height": 1239
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/384x743",
        "width": 384,
        "height": 743
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/256x495",
        "width": 256,
        "height": 495
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/128x248",
        "width": 128,
        "height": 248
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/96x186",
        "width": 96,
        "height": 186
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/64x124",
        "width": 64,
        "height": 124
      },
      {
        "src": "https://source.unsplash.com/Tn8DLxwuDMA/48x93",
        "width": 48,
        "height": 93
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/LEpfefQf4rU/1920x1280",
    "key": "LEpfefQf4rU",
    "width": 1920,
    "height": 1280,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/1080x720",
        "width": 1080,
        "height": 720
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/640x427",
        "width": 640,
        "height": 427
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/384x256",
        "width": 384,
        "height": 256
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/256x171",
        "width": 256,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/128x85",
        "width": 128,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/96x64",
        "width": 96,
        "height": 64
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/64x43",
        "width": 64,
        "height": 43
      },
      {
        "src": "https://source.unsplash.com/LEpfefQf4rU/48x32",
        "width": 48,
        "height": 32
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/nKC772R_qog/810x1080",
    "key": "nKC772R_qog",
    "width": 810,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/nKC772R_qog/1080x1440",
        "width": 1080,
        "height": 1440
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/640x853",
        "width": 640,
        "height": 853
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/384x512",
        "width": 384,
        "height": 512
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/256x341",
        "width": 256,
        "height": 341
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/128x171",
        "width": 128,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/96x128",
        "width": 96,
        "height": 128
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/64x85",
        "width": 64,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/nKC772R_qog/48x64",
        "width": 48,
        "height": 64
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/7GX5aICb5i4/720x1080",
    "key": "7GX5aICb5i4",
    "width": 720,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/1080x1620",
        "width": 1080,
        "height": 1620
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/640x960",
        "width": 640,
        "height": 960
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/384x576",
        "width": 384,
        "height": 576
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/256x384",
        "width": 256,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/7GX5aICb5i4/48x72",
        "width": 48,
        "height": 72
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/IuJc2qh2TcA/1080x1080",
    "key": "IuJc2qh2TcA",
    "width": 1080,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/1080x1080",
        "width": 1080,
        "height": 1080
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/640x640",
        "width": 640,
        "height": 640
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/384x384",
        "width": 384,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/256x256",
        "width": 256,
        "height": 256
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/128x128",
        "width": 128,
        "height": 128
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/96x96",
        "width": 96,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/64x64",
        "width": 64,
        "height": 64
      },
      {
        "src": "https://source.unsplash.com/IuJc2qh2TcA/48x48",
        "width": 48,
        "height": 48
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/NodtnCsLdTE/1920x1199",
    "key": "NodtnCsLdTE",
    "width": 1920,
    "height": 1199,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/1080x674",
        "width": 1080,
        "height": 674
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/640x400",
        "width": 640,
        "height": 400
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/384x240",
        "width": 384,
        "height": 240
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/256x160",
        "width": 256,
        "height": 160
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/128x80",
        "width": 128,
        "height": 80
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/96x60",
        "width": 96,
        "height": 60
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/64x40",
        "width": 64,
        "height": 40
      },
      {
        "src": "https://source.unsplash.com/NodtnCsLdTE/48x30",
        "width": 48,
        "height": 30
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/cWOzOnSoh6Q/1920x1280",
    "key": "cWOzOnSoh6Q",
    "width": 1920,
    "height": 1280,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/1080x720",
        "width": 1080,
        "height": 720
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/640x427",
        "width": 640,
        "height": 427
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/384x256",
        "width": 384,
        "height": 256
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/256x171",
        "width": 256,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/128x85",
        "width": 128,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/96x64",
        "width": 96,
        "height": 64
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/64x43",
        "width": 64,
        "height": 43
      },
      {
        "src": "https://source.unsplash.com/cWOzOnSoh6Q/48x32",
        "width": 48,
        "height": 32
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/so5nsYDOdxw/1920x1407",
    "key": "so5nsYDOdxw",
    "width": 1920,
    "height": 1407,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/1080x791",
        "width": 1080,
        "height": 791
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/640x469",
        "width": 640,
        "height": 469
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/384x281",
        "width": 384,
        "height": 281
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/256x188",
        "width": 256,
        "height": 188
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/128x94",
        "width": 128,
        "height": 94
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/96x70",
        "width": 96,
        "height": 70
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/64x47",
        "width": 64,
        "height": 47
      },
      {
        "src": "https://source.unsplash.com/so5nsYDOdxw/48x35",
        "width": 48,
        "height": 35
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/9UUoGaaHtNE/1920x1280",
    "key": "9UUoGaaHtNE",
    "width": 1920,
    "height": 1280,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/1080x720",
        "width": 1080,
        "height": 720
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/640x427",
        "width": 640,
        "height": 427
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/384x256",
        "width": 384,
        "height": 256
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/256x171",
        "width": 256,
        "height": 171
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/128x85",
        "width": 128,
        "height": 85
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/96x64",
        "width": 96,
        "height": 64
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/64x43",
        "width": 64,
        "height": 43
      },
      {
        "src": "https://source.unsplash.com/9UUoGaaHtNE/48x32",
        "width": 48,
        "height": 32
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/7AIDE8PrvA0/863x1080",
    "key": "7AIDE8PrvA0",
    "width": 863,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/1080x1352",
        "width": 1080,
        "height": 1352
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/640x801",
        "width": 640,
        "height": 801
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/384x481",
        "width": 384,
        "height": 481
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/256x320",
        "width": 256,
        "height": 320
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/128x160",
        "width": 128,
        "height": 160
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/96x120",
        "width": 96,
        "height": 120
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/64x80",
        "width": 64,
        "height": 80
      },
      {
        "src": "https://source.unsplash.com/7AIDE8PrvA0/48x60",
        "width": 48,
        "height": 60
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/BLW_KQ0Rkn0/719x1080",
    "key": "BLW_KQ0Rkn0",
    "width": 719,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/1080x1622",
        "width": 1080,
        "height": 1622
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/640x961",
        "width": 640,
        "height": 961
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/384x577",
        "width": 384,
        "height": 577
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/256x385",
        "width": 256,
        "height": 385
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/BLW_KQ0Rkn0/48x72",
        "width": 48,
        "height": 72
      }
    ]
  },
  {
    "src": "https://source.unsplash.com/13ky5Ycf0ts/720x1080",
    "key": "13ky5Ycf0ts",
    "width": 720,
    "height": 1080,
    "srcSet": [
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/1080x1620",
        "width": 1080,
        "height": 1620
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/640x960",
        "width": 640,
        "height": 960
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/384x576",
        "width": 384,
        "height": 576
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/256x384",
        "width": 256,
        "height": 384
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/128x192",
        "width": 128,
        "height": 192
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/96x144",
        "width": 96,
        "height": 144
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/64x96",
        "width": 64,
        "height": 96
      },
      {
        "src": "https://source.unsplash.com/13ky5Ycf0ts/48x72",
        "width": 48,
        "height": 72
      }
    ]
  }
]

Basic Setup

vue

<script setup>
import { ref } from 'vue'
import { PhotoAlbum } from 'vue-photo-album'
import data from './photos.json'

const photos = ref(data)
</script>

<template>
  <PhotoAlbum :photos="photos" layout="rows" />
</template>

Get Started ​

Installation ​

Register Component ​

Global ​

Local ​

Photos Data ​

Type ​

Basic Setup ​