How to include third-party libraries (like jquery, form-serializer, etc.) in vue.js?

Question

JavaScript

Unable to include third party libraries in 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>

Connecting in webpack config doesn't work either

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

Tell me, maybe I missed something?

Answer 1

missed the fact that there is jquery + bootstrap + lodash connection out of the box

Answer 2

So you explicitly write imports in RegisterModal.vue itself, then what you wrote jquery import in main.js, so it will only be visible in the scope of this file:

<script>
import $ from 'jquery';

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

Answer 3

in index.html connect locally. Or in index.js import

Answer 4

It is enough to write in index.html
script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.... "