Как подключать сторонние библиотеки (например jquery, form-serializer и т.д.) в vue.js?

Question

[alex5e]

Не получается подключить сторонние библиотеки в vue.js

main.js

...
    require('jquery')
    import Vue from 'vue'
    import VueMdl from 'vue-mdl'
    import App from './App'
    import Auth from './views/user/Auth'
    import Index from './views/Index'
    import VueRouter from 'vue-router'
    import VueResource from 'vue-resource'

    Vue.use(VueRouter)
    Vue.use(VueMdl)
    Vue.use(VueResource)

    const AppComponent = Vue.extend(App)
    new AppComponent({
      router,
      el: '#app',
      template: '<App/>',
      components: { App }
    })

RegisterModal.vue

<template>
  ...
</template>

    <script>
      export default {
        name: 'register',
        data () {
          return {
            msg: 'Register'
          }
        },
        methods: {
          open () {
            this.$refs.register.open()
          },
          close () {
            this.$refs.register.close()
          },
          submit () {
            var data = $('form').serialize() //  '$' is not defined
            console.log(jQuery) // 'jQuery' is not defined
            console.log(data);
          }
        }
      }
    </script>

Подключение в конфиге webpack тоже не работает

plugins: [
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
})
],

Подскажите, может я упустил чего?

Comments

[Владимир]

1) Я дословно подключал JQuery в вебпак вот так

plugins: [
new webpack.ProvidePlugin({
'window.jQuery': 'jquery'
}),

[Klein Maximus]

А зачем Вам в Vue еще и jQuery?

Answer 1

[Александр Аксентьев]

пропустили то что там из коробки есть подключение jquery + bootstrap + lodash

Comments

[alex5e]

А причем тут Laravel?

[Александр Аксентьев]

s77lanselot77s: вижу vuejs пишу про ларавел, не видел что это просто vuejs xD

Собственно почему этот способ не подойдёт?
К ларавелу там никакой привязки нет.

Answer 2

[Евгений]

Дак вы в самом RegisterModal.vue явно пропишите импорты, то что вы прописали импорт jquery в main.js, дак он только и будет виден в области видимости этого файла:

<script>
import $ from 'jquery';

export default {
    name: 'register',
    ...
}
</script>

Comments

[alex5e]

Я предполагал что импорт возможно сделать как локально (в компоненте), так и для всего проекта

[Евгений]

s77lanselot77s: Явное лучше неявного, можно конечно и в глобал засунуть, но потом искать, откуда, что - больше проблем получите в будущем, так что пишите импорты явно

Answer 3

[shelomanovd]

в index.html подключать локально. Или в index.js имопортировать

Answer 4

[Gennadiy Balachkov]

Достаточно в index.html прописать
script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2...."