how fix "modal is not a function" in vue.js?

Question

Hello everyone I got this error: [Vue warn]: Error in v-on handler: "TypeError: $(...).modal is not a function". modal is not a fuction Here is my code in welcome.blade.php:

<body>
    <div id="app">
        {{-- This is the vue component --}}
        <new-arrivals></new-arrivals>
    </div>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

Here is my js/app.js:

require('./bootstrap');

import Vue from 'vue'
import { VueCtkDateTimePicker } from 'vue-ctk-date-time-picker';
import swal from 'sweetalert2';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
// import $ from 'jquery';
// window.$ = $;
window.Vue = require('vue');
window.swal = swal;
Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);
Vue.component('new-arrivals', require('./components/NewArrivals.vue').default);


const app = new Vue({
    el: '#app'
});

Here is my vue script code:

<script type="text/javascript">
import axios from 'axios'

export default {
  data(){
      return {
      }
  },
  methods: {  
    openModal(){
        $('#create_form_modal').modal('show');
    }
  }
}
</script>

Looks like `js/app.js` uses JQuery and its loaded before JQuery script. Hence, change the order of the JS files will fix it. first call `jquery-3.6.0.min.js` and then `js/app.js`. — Debug Diva, Jun 28 '22 at 06:11
Try to add a `defer` attribute on you jquery script as well. — Darwin Marcelo, Jun 28 '22 at 07:45

score 0 · Accepted Answer · answered Jun 28 '22 at 11:27

Here is a similar issue: Bootstrap modal: is not a function

The reason for this problem was the wrong loading order of the scripts. Try to do this in that order

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

how fix "modal is not a function" in vue.js?

1 Answers1