<div id="app">
  <div v-viewer class="images clearfix">
    <template v-for="image in images">
      <img :src="image" class="image" :key="image">
    </template>
  </div>
</div>
.image {
    height: 200px;
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }
View Compiled
Vue.use(VueViewer.default)
console.log(VueViewer.default)
var Main = {
  methods: {
    toggle() {

    }
  },
  data() {
    return {
      images: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ]
    }
  }
}
var App = Vue.extend(Main)
new App().$mount('#app')
View Compiled

External CSS

  1. https://unpkg.com/viewerjs/dist/viewer.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
  2. https://unpkg.com/viewerjs/dist/viewer.js
  3. https://unpkg.com/v-viewer/dist/v-viewer.js