I am facing an issue with connecting a third-party js library to a vue.js component
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>
require with webpack
plugins: [
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
})
],
The above approach did not work for me
What is the solution to resolve my problem and successfully utilize any library within the vue.js component?