How to load vue Plugins inside components

mymacy

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 before

also i tried various ways of loading it like:
created() {
VueScrollTo()
},

Any help would be appreciated

Sweetyy

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

mymacy

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?

mymacy

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!

Sweetyy

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 !