VueJS with FullCalendar: load fullCalendar ONLY after linking scripts in index.html

Viewed 1992

I want to load fullCalendar into my Vue component but I get the error "fullCalendar is not a function". It seems as if all the scripts that I load in my index.html file are loaded after the Vue component is loaded

In my index.html file I have loaded the moment.min.js, jquery.min.js, and fullcalendar.min.js.

In my Calendar.vue, I have

export default {

    mounted () {
        $('#calendar').fullCalendar({})
    }

}

The $ would not be available unless I explicitly do "import $ from 'jquery'", which suggests that the scripts in index.html file do not load until after the component.

How do I solve this problem?

ADDITIONAL DETAILS: I am using Webpack with VueJS provided by https://github.com/vuejs-templates/webpack and am thus using the VueJS npm module, while the jquery, moment and fullcalendar libraries are all from CDN's linked from my index.html.

3 Answers

A nice solution is to use vue-full-calendar https://www.npmjs.com/package/vue-full-calendar

It generate the same behavior, if we addn't the following line in order to define the jquery "$" :

window.jQuery = window.$ = require('jquery')
Related