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 before

    also 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 !