Failed to mount component: template or render function not defined.

[ajmas]

I am really not sure what I am doing wrong, but I am getting the following error when using vue-panzoom 1.1.3 with a Vue 2 project (2.6.12):

Failed to mount component: template or render function not defined.

The code I am using:

<template>
  <div class="page">
    <pan-zoom class="image-viewer" :options="{minZoom: 0.5, maxZoom: 5}">
      <img :src="url" />
    </pan-zoom>
  </div>
</template>

<script>
import PanZoom from 'vue-panzoom';

export default {
  components: {
    PanZoom
  },
  data () {
    return {
      url: '/images/sample-image.png',
    }
  }
};
</script>

[ajmas]

Okay, turns out we have to follow the documentation by the letter, since using it as above does not work. So, during load:

import panZoom from 'vue-panzoom';
Vue.use(panZoom);

Alternatives such as Vue.component() don't work either.

[thecodealer]

using Vue.use() registers the component globally, so there's no need to do Vue.component(). If you insist on using it locally in your component without Vue.use(), kindly refer to #25

[thecodealer]

also, by default the component is registered as panZoom and not pan-zoom as you have it in your snippet. You can change this by doing

Vue.use(panZoom, {componentName: 'pan-zoom'});