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?

user_6503654 · Answer

This would be considered an initialization: https://github.com/fengyuanchen/viewerjs#syntax.
Use the mounted lifecycle hook to call it: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Since Viewer requires the html element you can make use of Vue ref to reference the container element:

and then feed it to the Viewer constructor in the mounted hook:

mounted() {
  const viewer = new Viewer(this.$refs.foo)
}

Example how to set it up here, you will have to provide the desired options and UX. https://codesandbox.io/s/kk4n8xjn25

user_1976512 · Answer

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',
    });
  }
})

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

2 Answers