title: Vue js - Getting Uncaught ReferenceError: jQuery is not defined
body: <p>I am new to Vue.js and trying to create a custom component that uses jQuery <a href="https://formbuilder.online/" rel="nofollow noreferrer">formBuilder</a> plugin. When I include the component file inside another component, I am getting an error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: jQuery is not defined in /resources/js/form-builder.min.js</p>
  </blockquote>
  
  <p>I created a custom component with name <code>formBuilder.vue</code>. Here is the component code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
     &lt;div class="content"&gt;
        &lt;formBuilder/&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
     // 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: {
         }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>In <code>app.js</code> file, which is placed in <code>resource/js/app.js</code>, I am calling this vue to be recursively used by other components:</p>
  
  <pre class="lang-js prettyprint-override"><code>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
  });
  </code></pre>
  
  <p>This is the component file where i am using formbuilder component</p>
  
  <pre><code>  &lt;template&gt;
      &lt;div class="content-wrapper"&gt;
          &lt;div class="content-header"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row mb-2"&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;h1 class="m-0 text-dark"&gt;Questionnaire&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row justify-content-center"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="card"&gt;
                              &lt;FormBuilder/&gt; &lt;!--- used formbuilder component ---&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          created() {
          },
          data() {
              return {
  
              }
          },
          methods: {
  
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have attached the error <a href="https://i.stack.imgur.com/tTh1t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTh1t.png" alt="screenshot"></a> as well.</p>
  
  <p>Can you guys help me find where I am doing wrong?</p>
  
  <p>Thanks in Advance.</p>