2.1.0 • Public • Published

    Vue Picture Swipe Gallery

    Codacy Badge npm download npm version Package Quality vue2 MIT License

    This component is a simple wrapper for the awesome Photoswipe. It's a Vue plugin that displays a gallery of image with swipe function (and more). Includes lazy (smart) loading (mobile friendly) and thumbnails.



    npm install --save vue-picture-swipe


    You can use it as you want. Here are some examples if you want to use it inline, or in a .vue file component or even with Laravel.

    Inline usage

    You can using it inline:

    <vue-picture-swipe :items="[
        {src: '',thumbnail: '',w: 600,h: 400, title: 'Will be used for caption'},
        {src: '',thumbnail: '',w: 1200,h: 900}

    Just remember to register the component:

    import VuePictureSwipe from 'vue-picture-swipe';
    Vue.component('vue-picture-swipe', VuePictureSwipe);
    new Vue({
      el: '#app'

    Usage in another component

    Create a component Example.vue. Then paste this:

      <vue-picture-swipe :items="items"></vue-picture-swipe>
      import VuePictureSwipe from 'vue-picture-swipe';
      export default {
        data() {
          return {
            items: [{
              src: '',
              thumbnail: '',
              w: 600,
              h: 400,
              alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
              src: '',
              thumbnail: '',
              w: 1200,
              h: 900

    Usage with Laravel

    Edit resources/assets/js/app.js and add this just before the new Vue lines.

    import VuePictureSwipe from 'vue-picture-swipe';
    Vue.component('vue-picture-swipe', VuePictureSwipe);

    Then run your watcher:

    npm run watch

    Advanced usage

    PhotoSwipe options

    Use options for Photoswipe options.

    <!-- Disable "share" buttons. -->
    <vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe>

    PhotoSwipe instance

    You can access the PhotoSwipe instance via setting a ref, the instance object is exposed as pswp.

    <vue-picture-swipe ref="pictureSwipe"></vue-picture-swipe>


    open Attributes Listen to Description
    Open none @open Emitted after gallery opens
    Close none @close Emitted after gallery closes


    I did not found any vue component that uses thumbnail (smaller version of images) and is mobile-friendly (swipe)

    • This one is documented (and issued) in chinese only and has no thumbnails. Edit: I translated the readme (with google translate) and submitted a PR that was accepted, so now, the documentation is in english)
    • This one is documented (and issued) in chinese too and has no thumbnails either.
    • This one has no documentation.
    • This one is a kind of fork of the previous one
    • ...

    So I created mine.



    npm i vue-picture-swipe

    DownloadsWeekly Downloads






    Unpacked Size

    379 kB

    Total Files


    Last publish


    • rap2hpoutre