Laravel 5.4 + VueJS + jQuery Full Calendar

Remove that jquery-3.1.1.js and put app.js at the 1st order. As you already requiring jquery within bootstrap.js.

Nope, I've tried that.

Then I get Uncaught TypeError: $(...).fullCalendar is not a function And Uncaught ReferenceError: jQuery is not defined

I see, but still for sure that jquery is unnecessary, already included with app.js. It mean you load jquery after fullcalendar.

Try wrap inside $(document).ready() if still fail, test with axios.get('current_url_here').then(() => { // load fullcalendar here });

My opinion, vue mounted() is after window.onload but before $(document).ready() CMIIW.

No luck both ways :(

Uncaught (in promise) TypeError: $(...).fullCalendar is not a function

Hmm strange, i can load $fullcalendar without problem. Here my js file:

bootstrap.js

window.$ = window.jQuery = require('jquery');
/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.moment = require('moment');

window.Pace = require('node-pace-progress');
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.fyi.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

page.js

const Vue = require('vue')

Vue.component('example', require('./../components/Example.vue'))

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

Example.vue

<template>
    <div class="col mt-5">
        <div id="calendar"></div>
    </div>
</template>

<script>
    require('fullcalendar')
    export default {
        mounted() {
            $('#calendar').fullCalendar()
        }
    }
</script>

Script load order, 1st is compiled app.js then page.js.

Here is the screenshot

I also got these Errors with 5.4 and jQuery.

Haven't found a fix yet, but if you only need this for fullcalendar (or the error occurs only there) i suggest you use the vue component for it, it won't have any problems, modules have access to jQuery.

https://github.com/CroudSupport/vue-fullcalendar

I use this myself and it work like a charm.

Edit:

I looked at you examples a little more, and i think in this case it's just an "ordering" issue. So Mix puts everything into app.js (i would suggest to extract atleast jquery), so at the point where fullcalendar tries to add a function to jquery (.fullCalendar) it uses jquery 3.1.1 you linked, but vue is using the packaged jquery build, where the function won't be defined.

So if you extract jquery it will be in a vendor.js file, you can then include this vendor.js instead of jquery itself, so everything will use only this jquery version.

But after doing that "Uncaught ReferenceError: jQuery is not defined" will stay, thats the problem i have/had, the jQuery Object won't be called jQuery (even if you define it in the bootstrap.js), there will be an hash or something appended, so if you use jQuery in your custom code use $ instead.

https://laracasts.com/discuss/channels/javascript/mixlaravel-54-jquery-object-gets-hash-appended

Awesome, i thought you already requiring fullcalendar. Note, sometimes jquery plugin fail inside mounted() {}. Thats why i put it within ajax request on page load. My case is Datatables.

What version of Vue2 you have there?

"vue": "^2.0.1"

Use latest 2.1.10 instead.

@hendranucleo

Thanks! Your example solved my problem.

@phpMick No problem mate, love to share love to gain :)