Importing a Javascript plugin into Laravel for use in Vue

Question

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.

Did you manage to include cropperjs into Mix? I have the same problem. Maybe you can post an answer.. — Alexxus
– Alexxus, Commented Jul 18, 2023 at 12:26

chongsong · Accepted Answer · 2018-05-11 10:17:22Z

1

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

answered May 11, 2018 at 10:17

chongsong

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Kopty Over a year ago

I understand that. That was not my question. You can still use JS plugins inside Vue. I have managed to get it to work, the only thing is, that I am using the Cropper JS CDN link to link the library in my HTML page, and not via Mix. This of course is not the ideal way to do this and that is what I am seeking.

Collectives™ on Stack Overflow

Importing a Javascript plugin into Laravel for use in Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related