Unknown custom element: <FullCalendar> - FullCalendar Vue

Question

I'm trying to create a vue component that utilizes the FullCalendar vue component:

<script>
import FullCalendar from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data: function() {
    return { 
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        events: '/schedule/month_events',
        eventOrder: "building_id",
        selectable: true,
        defaultAllDay: true,
        editable: true,   
        dateClick: this.handleDateClick,
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev today next'
        }
      }
    }
  },
  methods: {
    handleDateClick: function(arg) {
      console.log('test');
    }
  }
}
</script>

<template>
  <FullCalendar :config="calendarOptions" />
</template>

<style scoped>
</style>

and I get the following error:

[Vue warn]: Unknown custom element: <FullCalendar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I create my own component, it displays the template and finds the component just fine.

How do I properly use FullCalendar component in my Vue JS component?

Answer 1

Since you are using Vue component, you need to import from @fullcalendar/vue. You are currently importing from @fullcalendar/core.