How to use annotorious in vue.js template

Question

I want to use annotorious (with openseadragon plugin) in a vue.js (vue 3) template. I've installed annotorious with npm. This is what i've got so far:

    <template>
        <div class="flex-grow">
            <img ref="tag_img" width="100%" :id="img_id" src='../../assets/images/apple.png'>
        </div>
    </template>
    
    <script>
    import * as Annotorious from '@recogito/annotorious-openseadragon'
    import '@recogito/annotorious-openseadragon/dist/annotorious.min.css'
    
    export default {
      props: {
        img_id: String
      },
      mounted: function () {
        var anno = Annotorious({
          image: this.$refs.tag_img
        }, {})
        anno.setDrawingTool('polygon')
      }
    }
    </script>

I recieve the following error in my browser:

    [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of undefined"

found in

---> <AnnotoriousImage> at src/components/interaction/AnnotoriousImage.vue
       <Tagging> at src/components/pages/Tagging.vue
         <App> at src/App.vue
           <Root>
warn @ vue.esm.js?efeb:628
logError @ vue.esm.js?efeb:1893
...
vue.esm.js?efeb:1897 TypeError: Cannot read property 'style' of undefined

Answer 1

You are mixing up the standard version of Annotorious (for images) and the OpenSeadragon plugin (for high-res images, displayed in the OpenSeadragon viewer) I believe.

What you are importing is the OpenSeadragon version. But the way you are initializing is the one you'd use for the standard version of Annotorious.

Assuming you want to annotate a normal image: the init is correct. But you'd need to

 import * as Annotorious from '@recogito/annotorious'

Answer 2

The answer of Rainer brought me to a working version. It is possible to init it in the mount function of annotorious.

    import OpenSeadragon from 'openseadragon'
    import * as Annotorious from '@recogito/annotorious-openseadragon'
    import '@recogito/annotorious-openseadragon/dist/annotorious.min.css'

export default {
      props: {
        img_url: String,
        default: '../../../assets/images/apple.png'
      },
      mounted: function () {
        const viewer = OpenSeadragon({
          id: 'annotorious_container',
          minZoomImageRatio: 0,
          maxZoomPixelRatio: Infinity,
          tileSources: {
            type: 'image',
            url: require('../../../assets/images/apple.png'),
            ajaxWithCredentials: false,
            fitBounds: true
          }
        })
    
        var options = {
          disableEditor: true // the default editor is disabled to implement a custom behaviour
        }
        var anno = Annotorious(viewer, options)
        anno.setDrawingTool('polygon')
        
        window.viewer = viewer
        window.anno = anno
      },
      components: {
        'Icon': Icon,
        'AnnotoriusEditorPopup': AnnotoriusEditorPopup


         }
}