How to use with NUXT?

Trying to figure out how to use this with NUXT. The default vue setup will not work because it does not support server side rendering. I would expect to be able to call this via a plugin and have tried a few different ways such as below:

Created a new plugin FullCalendarVue.js:

import Vue from 'vue';
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

// Vue.use(FullCalendar);
Vue.component('FullCalendar', FullCalendar);
// Vue.component('dayGridPlugin', dayGridPlugin);
Vue.use(dayGridPlugin);

Added the plugin to nuxt.config.js:

  plugins: [
    {mode: 'client', src: '~/plugins/FullCalendarVue'},
  ],

On the vue page I wrap the calendar component in no-ssr tags:

<no-ssr>
        <FullCalendar
            defaultView="dayGridMonth"
            :plugins="calendarPlugins"
        />
</no-ssr>

This seems to load the fullcalendar plugin but I keep getting errors that “dayGridPlugin is not defined”. Any suggestions on how to setup?

[stellasoft-george]

@RMFogarty @nucle

Hope this helps you, this is how I got it working with nuxt:

1. Create a base component, mine is at components/Calendar.vue and contains the following (copied from the full calendar documentation)

<template>
    <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'

    export default {
        components: {
            FullCalendar // make the <FullCalendar> tag available
        },
        data() {
            return {
                calendarPlugins: [ dayGridPlugin ]
            }
        }
    }
</script>

1. In a plugin at plugins/full-calendar.js I have the following

import Vue from 'vue';
import Calendar from '~/components/calendar'

Vue.component('full-calendar', Calendar);

1. And then my nuxt.config.js has the following

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

The above works for me in universal mode. Defining a base component is what full calendar recommend in the docs so I’ve done that, and ssr: false seems to be the key to avoid Element is not defined errors

[EstebanFuentealba]

Hello Guys, I’m experiencing “Element is not defined” errors. I tried ur steps @stellasoft-george . What do u think i’m missing ? I was trying to import the Calendar.vue component in another .vue file.

I am having the same issue, not sure how to fix it, even following @stellasoft-george solution

EDIT: solved the issue myself, got wrong direction when implementing following @stellasoft-george, it works now, thanks 😃

@chrno1209 you can implement

<template>
      <Calendar />
</template>
<script>
let components = {};
if(process.browser) {
    const Calendar = require('~/components/Calendar').default;
    components = {
        Calendar
    }
}
export default {
 components 
}
</script>
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>