Vue Picture Swipe Gallery

Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

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},
    {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
          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>