Initialize Viewer.js in the mounted hook function. (Error: The first argument is required and must be an element)

Question

I am a newbie to vue.js, I'm trying to implement the image zooming, rotate, scaling and some other functionalities using the npm module: npm viewerjs module.

I followed these steps: Github repo. And I'm getting the issue like below:

Researched on github issues and found an answer here: Github issue link .@fengyuanchen says like:

have to initialize Viewer.js in the mounted hook function.

How to initialize the viewer.js in mounted?

Answer 1

TommyF response is perfect fine. However I'd recommend to use the viewer as a dynamic Vue data, thus you would be able to use the Viewer library methods, events and all its features inside your Vue component.

   const app = new Vue({
      el: '#app',
      data() {
        return {
          viewer: null,
          mode: 'modal',
        }
      },
      created() {

      },
      methods: {
        zoom(value) {
          this.viewer.zoom(value);
        },
        close() {
          this.viewer.exit();
        },
        toggleMode(newmode) {
          if (newmode != this.mode) {
            this.mode = newmode;
            this.viewer.destroy();
            this.viewer = new Viewer(this.$refs.gallery, {
              inline: (this.mode === 'inline'),
              url: 'data-original',
            });
          }
        }
      },
      mounted() {
        this.viewer = new Viewer(this.$refs.gallery, {
          inline: false,
          url: 'data-original',
        });
      }
    })

See example below:

const app = new Vue({
  el: '#app',
  data() {
    return {
      viewer: null,
      mode: 'modal',
    }
  },
  created() {

  },
  methods: {
    zoom(value) {
      this.viewer.zoom(value);
    },
    close() {
      this.viewer.exit();
    },
    toggleMode(newmode) {
      if (newmode != this.mode) {
        this.mode = newmode;
        this.viewer.destroy();
        this.viewer = new Viewer(this.$refs.gallery, {
          inline: (this.mode === 'inline'),
          url: 'data-original',
        });
      }
    }
  },
  mounted() {
    this.viewer = new Viewer(this.$refs.gallery, {
      inline: false,
      url: 'data-original',
    });
  }
})

<link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
  }
  
  .grid::before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }
  
  .grid>*:first-child {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
  }
  
  .grid img {
    width: 100%;
    height: 100%;
  }
</style>
<div id="app">

  <button @click="zoom(0.1)"> zoom + </button>
  <button @click="zoom(-0.1)"> zoom - </button>
  <button @click="close()"> close </button>
  <button @click="toggleMode('inline')"> inline </button>
  <button @click="toggleMode('modal')"> modal </button>

  <div>
    <div ref="gallery" class="grid">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" alt="Cuo Na Lake">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" alt="Tibetan Plateau">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" alt="Jokhang Temple">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" alt="Potala Palace 1">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" alt="Potala Palace 2">
      <img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" alt="Potala Palace 3">


    </div>
  </div>
</div>