How do you handle outside JavaScript libraries/frameworks in Vue.js?

I'm currently building my app with the Vue-cli webpack template and I've had trouble getting all elements to load initially on Vue template pages using other libraries (JQuery, Video.js). They only show when I refresh. How do you handle this?

And pardon me if the solution is obvious, as I'm very new to development and front end JS frameworks!

Thanks everyone!

Either use Vue, or use jQuery. Both libraries aren't aware of each other, and they are responsible for similar things (handling UI events, manipulating the Document Object Model, etc.). Using them both side-by-side is going to be increasingly chaotic as your app grows in size.

Have you received errors in your Webpack console window, when loading the elements seemed to fail? If yes, would you mind sharing those with us?

Thanks.

I actually just got rid of all my JQuery dependencies (using Bootstrap 3) just yesterday. Thank goodness there were some solutions out there to solve some of the UI problems.

I'm making a video app, using Video.js and I still haven't found a way to get videos to load in the app without hitting refresh.

Included in my Webpack "main.js" file and required the JS and the CSS like so but to no avail:

require('video.js/dist/video.min.js')

require('!vue-style-loader!css-loader!video.js/dist/video-js.min.css')

Empty pages until I refresh.

Any ideas what could be causing it?

Are you including the CSS and the JavaScript in "main.js"? It would be best to import the plugin in your Video component. For important, I normally use import 'video.js/dist/...' syntax when writing apps using the Vue CLI, not sure if that works in ES6 but it might

Thread

How do you handle outside JavaScript libraries/frameworks in Vue.js?

Responses(1)

Recent threads

Search Hashnode

How do you handle outside JavaScript libraries/frameworks in Vue.js?

Responses(1)

Recent threads