Createapp() called for every event in fullcalendar vue3

I don’t know why no-one has mentioned this yet, but everytime I make an event the Createapp() function in the package itself gets called. This means that when I have 1000 events there will be 1001 vue apps created (1 extra because I create the vue app myself). Here is my vue component which I can call in my blade templates:

<template>
    <FullCalendar ref="fullCalendar"
                  :options="calendarOptions"
    >
        <template v-slot:eventContent='arg'>
            <div class="flex w-full absolute inset-0 items-center"
                 :id="arg.event.id"
                 @click="openModal(arg.event.id)">
                <p class="font-bold">
                    {{ arg.timeText }}
                </p>
                <p class="ml-2">
                    {{ arg.event.title }}
                </p>
            </div>
        </template>
    </FullCalendar>
</template>

<script>
import '@fullcalendar/core/vdom'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list';

export default {
    components: {
        FullCalendar
    },

    data() {
        return {
            calendarOptions: {
                plugins: [dayGridPlugin, listPlugin],
                initialView: this.layout,
                events: this.events,
                eventClick: this.openModal,
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    meridiem: false,
                    hour12: false
                }
            },
        }
    },

    props: {
        layout: String,
        events: Array
    },
}
</script>

And in my blade template:

                <calendar
                    :layout="'dayGridMonth'"
                    :events="[
                        @foreach($lessons as $lesson)
                            {
                            id: '{{$lesson->id}}',
                            title: '{{$lesson->student->firstname}} {{$lesson->student->surname}} - {{$lesson->instructor->firstname}} {{$lesson->instructor->surname}}',
                            start: '{{$lesson->date}}T{{$lesson->time}}',
                            cancelled: {{ $lesson->cancelled }}
                            },
                        @endforeach]"
                ></calendar>

As you can see I loop through my lessons which I’ll pass as the events. I’ll provide a screenshot in which you can see this bug occuring.

[arshaw]

@keygun-development, thanks, I’ve identified this as a performance issue as well.

I’ve fixed this in the latest v6-beta releases

Implementations vue3: https://github.com/fullcalendar/fullcalendar-vue/blob/vue3-v6/src/FullCalendar.ts#L38 vue2: https://github.com/fullcalendar/fullcalendar-vue/blob/vue2-v6/src/FullCalendar.ts#L40

[arshaw]

Released in v6.0.0