How to load vue Plugins inside components
-
Heyhey… im trying to load a vue Plugin (for example vue.scrollTo) which has custom directives inside a component. The normal way of installing Plugins works fine but when i import the plugin inside a component i get the “Failed to resolve directive: scroll-to” error.
What i have tried so far:
import VueScrollTo from ‘vue-scrollto’
import VueScrollTo from ‘…/plugins/vue-scrollto’ // this is the file i created with quasar new plugin and used beforealso i tried various ways of loading it like:
created() {
VueScrollTo()
},Any help would be appreciated
-
Hi @mymacy ,
I am using it in my project. What i did is simply npm install the package and after, without any import or plugin, i directly call it in my component in a method like :
myMethod() { var VueScrollTo = require('vue-scrollto') var options = { container: '#scrollable-content', easing: 'ease-in-out', cancelable: true, onStart: function (element) { // scrolling started }, onDone: function (element) { // scrolling is done }, onCancel: function () { // scrolling has been interrupted }, x: false, y: true } }
Maybe this is not the best way to do it but i’m only using it in a single component that’s why for my part it’s fine.
Hope it helps -
Hey @Sweetyy,
thanks for the response!
What do you mean with directly calling it in your component? where exactly do you place “myMethod()” ? Inside mounted or created?
Also are you able to use the directives after using it like that? -
sorry for the double post but i would love to know how i can resolve this isse as im adding more and more libraries… i just added vue isotope and in the Docs they say:
// ES6
import isotope from ‘vueisotope’
…
export default {
components: {
isotope,
}
…// ES5
var isotope = require(‘vueisotope’)i tried both but neither works… i have to use the quasar plugin way again… this time with “Vue.component(‘isotope’, isotope)”…
any help would be really appreciated!
-
Hi @mymacy
myMethod() is placed here :
export default { components: {}, data () { return {} }, methods: { myMethod () {} } }
And i call it with a click for example :).
Hope it helps !