Using with Vuejs webpack

[ilijaveselica]

How to use this library with vue webpack? I've included the min.js file in main.js and getting the error:

annotorious.min.js?0dce:8 Uncaught TypeError: Cannot read property 'navigator' of undefined(…)

However, if I include it directly in html file then it works, but that's not the "proper" way to do it.

[gywgithub]

Hi, I met the same problem. How did you solve it ? @ilijaveselica

[ilijaveselica]

@gywgithub I didn't solve it. I made my own solution for this

[gywgithub]

I solved this problem using the exports-loader and script-loader.

npm i -D exports-loader script-loader

Configure in webpack.base.conf.js

...
module: {
  loaders: [
    {
      test: require.resolve('../src/assets/js/annotorious.min.js'),
      loader: 'exports-loader?window.anno!script-loader'
    }
 ]
}
...

Modify in the .vue file

require("exports?window.anno!../../src/assets/js/annotorious.min.js");

This can

[wuliupo]

I did do anything. It is works for me (Webpack + Vue).

import 'annotorious';
import 'annotorious/css/theme-dark/annotorious-dark.css';
import 'annotorious-selector-pack/src/fancy_box_selector.js';
export default {
    mounted() {
        anno.addPlugin('FancyBoxSelector', { activate: true });
    }
    methods: {
        init() {
            window.anno.makeAnnotatable(this.$refs.img);
        }
    }
}

for the template

<img src="THE_IMG_URL" @load="init" ref="img">