Пользовательский компонент VueJS

Question

Мне нужно добавить в мой компонент jquery cropit plugin. Поэтому я добавил cropit к моему package.json и установить

рядом я попытался

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

и

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

но не работает

выход хром консоль

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

Кажется, t cropit плагин в настоящий момент не совместим с версиями jQuery 3.0 и выше. Проверьте этот вопрос на github.

Я установил jQuery 2.1 и не нашли каких-либо ошибок в моей консоли:

<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>