How to connect global jquery plugin on vue.js?

Question

JavaScript

Hello.
How to correctly connect the OnePageScroll plugin ( www.thepetedesign.com/demos/onepage_scroll_demo.html ) to vue.js?
I have an example of how to connect such plugins to vue.js via npm, but I don’t know how to connect just a plugin, not via npm.
You need it right, and not just add .css and .js to index.html

Answer 1

If not via NPM, then via CDN. Open your index.html and add links.
But most likely you are interested in how to make it work. There are two options:
1. Through a hook:

export default {
  // mounted неплохой вариант, если document должен быть ready
  mounted () {
    const $ = window.$
    $('.main').onepage_scroll()
  }
}

2. Or through a custom directive:

export default {
  directives: {
    // Произвольное имя директивы
    onePageScroll: {
      // На этом хуке компонент со всеми дочерними компонентами готов
      componentUpdated (el) {
        const $ = window.$
        // Елемент не нужно «селектить» по классу/ИД т.к. он передан в аргументы директивы
        $(el).onepage_scroll()
      }
    }
  }
}

<div>
  <section v-one-page-scroll />
</div>

Not sure if the above hooks will work well/at all—try different options.

Answer 2

If using webpack then use providePlugin to include jquery.