Vue Js - Getting Uncaught Referenceerror: jQuery Is Not Defined
I Am New to Vue. Js and Trying to Create a Custom Component That Uses jQuery formBuilder Plugin. When I Include the Component File Inside Another Component, I...
I am new to Vue.js and trying to create a custom component that uses jQuery formBuilder plugin. When I include the component file inside another component, I am getting an error:
Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js
I created a custom component with name formBuilder.vue. Here is the component code:
<template>
<div class="content">
<formBuilder/>
</div>
</template>
<script>
// import './jquery.min.js';
// import './jquery-ui.min.js';
// import './form-builder.min.js';
export default {
created() {
},
data() {
return {
}
},
mounted() {
jQuery(this.$el).formBuilder();
},
methods: {
}
}
</script>
In app.js file, which is placed in resource/js/app.js, I am calling this vue to be recursively used by other components:
window.Vue = require('vue');
require('./bootstrap');
require('admin-lte');
require('./datatable');
import router from './router';
import Datepicker from 'vuejs-datepicker';
import CKEditor from 'ckeditor4-vue';
import FullCalendar from 'vue-full-calendar';
import 'fullcalendar/dist/fullcalendar.css'
import Vue from 'vue';
import jQuery from 'jquery'
import './form-builder.min.js';
Vue.use(VueRouter)
Vue.use(FullCalendar);
Vue.use(CKEditor)
Vue.component("vue-datepicker", Datepicker);
Vue.component('FormBuilder', require('./components/tools/formBuilder.vue').default);
const app = new Vue({
el: '#app',
router
});
This is the component file where i am using formbuilder component
<template>
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Questionnaire</h1>
</div>
<div class="col-sm-6"></div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<FormBuilder/> <!--- used formbuilder component --->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
},
data() {
return {
}
},
methods: {
}
}
</script>
I have attached the error as well.
Can you guys help me find where I am doing wrong?
Thanks in Advance.
2 Answers
Importing an object into Vue's app JS doesn't automatically produce that object for use by other components.
There are at least two ways to do this (though I recommend avoiding all this and just importing jQuery in the components that need it):
Option 1: Vue.prototype
In your app JS, add jQuery to the Vue prototype after you import it, which will make it accessible to every component using the syntax this.jQuery:
Vue.prototype.jQuery = jQuery
Option 2: window object
Alternatively, you could add it to the window object after importing and use it like window.jQuery:
window.jQuery = jQuery
Option 3: Individual imports
It's probably more readable/maintainable to simply import it in components that use it:
import jQuery from 'jquery'
and then you can use it with the syntax in your example.
That worked for me (Vue 3) for some reason i had to stop the cli and restart
window.$ = window.jQuery = require('jquery');
Eslint may return "Unexpected top level property" "$". You will need to insert an exception in your package.json
"env": {
...
"jquery": true,
},
It is important to know that jquery will only be available in .vue files. Therefore, your extensions and libraries may report an error. In these cases you will have 2 options:
- Transform libraries into a .vue template
- Make a local import on top of them.
import jQuery from 'jquery'
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
