How to import vue-full-calendar as plugin in Nuxt

Question

I am having issues getting vue-full-calendar to work with Nuxt. I have made a plugin vue-full-calendar.js in the plugins directory where I check for a browser environment:

import Vue from 'vue'

if (process.browser) {
  window.onNuxtReady(() => {
    const VueFullCalendar = require('vue-full-calendar')
    Vue.use(VueFullCalendar)
  })
}

Next I added the plugin to nuxt.config.js with ssr set to 'false' like so:

plugins: [
    { src: '~plugins/vue-full-calendar', ssr: false }
]

And I simply include it in the template section of my nuxt page file:

 <template>
  <div>
    <full-calendar :events="events" :header="header" :config="config" ref="calendar"></full-calendar>
    <appointment-dialog :show="showAppointmentDialog"
                        :selectedAppointment="selectedAppointment"
                        @dialog-close="showAppointmentDialog = false">
    </appointment-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import AppointmentDialog from '~/components/AppointmentDialog'

  export default {
    head () {
      return {title: this.$t('appointments')}
    },
    data () {
      return {
        showAppointmentDialog: false,
        selected: {},
        header: {
          center: 'title',
          left: 'prev,next today',
          right: 'agendaWeek,agendaDay'
        },
        events: []
      }
    },
    fetch ({store, params}) {
      store.dispatch('appointments/fetch')
      store.dispatch('settings/fetch')
    },
    methods: {
      goToDate (date) {
        this.$refs.calendar.fireMethod('gotoDate', date)
      }
    },
    watch: {
      selectedDate (date) {
        this.goToDate(date)
      }
    },
    computed: {
      ...mapGetters({
        selectedAppointment: 'appointments/selected',
        appointments: 'appointments/appointments',
        settings: 'settings/byName',
        selectedDate: 'dates/selectedDate'
      }),
      config () {
        return {
          eventClick: (event) => {
            this.selected = event.source.rawEventDefs[0]
            this.$store.commit('SET_SELECTED_APPOINTMENT', this.selected)
            this.showAppointmentDialog = true
          },
          firstDay: 1,
          defaultDate: this.selectedDate,
          allDaySlot: false,
          slotDuration: 15,
          slotLabelInterval: 'label',
          minTime: 8,
          maxTime: 19
        }
      }
    },
    components: {
      AppointmentDialog
    }
  }
</script>

However in the console I get two errors:

'The client-side rendered virtual DOM tree is not matching server-rendered content'

'Unknown custom element: <full-calendar>'

But the full calendar component should be registered globally since I registered it as a plugin.

Answer 1

Got it working now. First I made a plugin 'vue-full-calendar.js' in plugins directory.

import Vue from 'vue';
import VueFullCalendar from 'vue-full-calendar';

Vue.use(VueFullCalendar);

Then I added the plugin to the nuxt.config.js file with ssr set to false:

plugins: [
  { src: '~plugins/vue-full-calendar', ssr: false }
],

Then in my Nuxt page in the template section I set the full-calendar component as a child of the no-ssr component.

<template>
 <div>
   <no-ssr>
     <full-calendar :events="events" :header="header" :config="config" ref="calendar">
     </full-calendar>
   </no-ssr>
 </div>
</template>