CODEWITHSUNDEEP
javascriptvue.jslaravel-5.5laravel-5.6
Kopty
Kopty

Reputation: 548

Importing a Javascript plugin into Laravel for use in Vue

So I'm trying to build a Vue component using the features found in the Javascript plugin Cropper JS. My app is built using Laravel 5.6. I first pulled in Cropper JS using NPM:

npm install cropperjs

Next, in my resources/assets/js/app.js file, I added the following lines:

import Cropper from 'cropperjs'
Vue.use(Cropper);

Note: You can assume that Vue has already been properly setup in this case.

This compiles fine when I run 'npm run watch', but when I try to visit my web app (which is just displaying Hello World at this point), I see an error in the console which states:

Uncaught TypeError: Cannot call a class as a function

Now, in the past I have imported & used libraries that were pulled in via npm with the exact same commands. However, in those cases, the folder structure was a bit different, perhaps it was optimized for Vue?

Under my node_modules/cropperjs directory, the folder structure is as follows:

/dist
/src
/types
CHANGELOG.md
LICENSE
package.json
README.md

I hope this information is sufficient in troubleshooting the error.

Thank you.

Upvotes: 1

Views: 335

Answers (1)

chongsong
chongsong

Reputation: 11

Cropperjs is not a plugin of Vue, you can use vue-cropper or other image cropper, if you want use cropperjs,you 

let image = document.querySelector('XX')
var cropper = new Cropper(image,{options})

Upvotes: 1

Related Questions