Vue js - Getting Uncaught ReferenceError: jQuery is not defined

Question

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.

Answer 1

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.