No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to load vue Plugins inside components

    Help
    2
    5
    880
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mymacy last edited by

      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 🙂

      1 Reply Last reply Reply Quote 0
      • S
        Sweetyy last edited by

        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 🙂

        1 Reply Last reply Reply Quote 0
        • M
          mymacy last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • M
            mymacy last edited by

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

            1 Reply Last reply Reply Quote 0
            • S
              Sweetyy last edited by

              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 !

              1 Reply Last reply Reply Quote 0
              • First post
                Last post