Kevin Ball is a web front-end consultant and trainer. He publishes the Friday Frontend newsletter, is a panelist on the JSParty podcast, and can often be found … More about Kevin…
[…]
This progressive nature has made it very easy to begin adopting Vue.js piecemeal, without having to do a big architecture rewrite. However, one thing that is often overlooked is that it’s not just easy to embed Vue.js into sites written with other frameworks, it’s also easy to embed other code inside of Vue.js. While Vue likes to control the DOM, it has lots of escape hatches available to allow for non-Vue JavaScript that also touches the DOM.
[…]
This article assumes some familiarity with Vue.js, and the concepts of components and directives. If you are looking for an introduction to Vue and these concepts, you might check out Sarah Drasner’s excellent introduction to Vue.js series or the official Vue Guide.
[…]
If using global JavaScript, include the script for the library before your Vue project:
[…]
We can then add it globally to all Vue instances and components with the Vue.filter method:
[…]
To avoid this, you need to hook the library into Vue’s lifecycle, so it runs after Vue is done manipulating the DOM element, and properly handles updates that Vue instigates.
[…]
More information on these can be found in the Vue Guide on custom directives.
[…]
For example, to start wrapping jquery-multiselect, we could write:
[…]
Now that we’ve looked at how straightforward it is to utilize third-party JavaScript within Vue, it’s worth discussing drawback of these approaches, and when it appropriate to use them.
[…]
