VueJS custom component

Question

I need add to my component jquery cropit plugin. So I added cropit to my package.json and install

next I tried

<template>
  <div id="image-cropper">...</div>
</template>

and

import 'cropit'
export default{
  mounted: function(){
        $('#image-cropper').cropit({
            imageState: {
                src: 'http://lorempixel.com/500/400/',
            },
        });
  }
}

but is not working

chrome console output

Uncaught TypeError: Cannot read property 'push' of undefined at Cropit.init (eval at (app-d1eddf4073.js:2440), :274:41)
at new Cropit (eval at (app-d1eddf4073.js:2440), :194:11)
at HTMLDivElement.eval (eval at (app-d1eddf4073.js:2440), :102:21)
at Function.each (eval at (app-d1eddf4073.js:176), :368:19)
at jQuery.fn.init.each (eval at (app-d1eddf4073.js:176), :157:17)
at jQuery.fn.init.init (eval at (app-d1eddf4073.js:2440), :96:18)
at jQuery.fn.init._jquery2.default.fn.cropit (eval at (app-d1eddf4073.js:2440), :147:26)
at VueComponent.mounted (eval at (app-d1eddf4073.js:1565), :65:29)
at callHook (eval at (app-d1eddf4073.js:2428), :2758:19)
at Object.insert (eval at (app-d1eddf4073.js:2428), :1769:5)

Answer 1

It seems that cropit plugin isn't compatible with jQuery 3.0 and above versions at this moment. Check out this issue on github.

I installed jQuery 2.1 and didn't found any errors in my console:

<template>
  <div class="cropit">
    <div id="image-cropper"></div>
  </div>
</template>

<script>

import cropit from "cropit"
import $ from "jquery"

export default {
  name: 'cropit',
  mounted: function() { 
    $('#image-cropper').cropit();
  }
}
</script>