How to use FullCalendar with Nuxt3? getting __vite_ssr_import_1__ is not defined

Question

Trying to setup FullCalendar (Vue) with NuxtJS version 3.

This SFC results in a ERROR [worker] __vite_ssr_import_1__ is not defined with nuxi dev.

I tried variations of https://github.com/fullcalendar/fullcalendar-vue/issues/5 and https://github.com/fullcalendar/fullcalendar-vue/issues/152

I tried using resolve dedup for @fullcalendar/common in nuxt config, as well as port this to nuxt : https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript

<template>
  <FullCalendar :options="calendarOptions" />
</template>
<script setup>
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
const handleDateClick = (arg) => {
  alert("date click! " + arg.dateStr);
};
const calendarOptions = {
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: "dayGridMonth",
  dateClick: handleDateClick,
  events: [
    { title: "event 1", date: "2019-04-01" },
    { title: "event 2", date: "2019-04-02" },
  ],
};
</script>

Current package.json is:

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.0.0",
    "autoprefixer": "^10.4.2",
    "nuxt3": "^3.0.0-27451165.114cbe3",
    "postcss": "^8.4.8"
  },
  "dependencies": {
    "@fullcalendar/common": "^5.10.1",
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@headlessui/vue": "^0.0.0-insiders.79b3015",
    "@heroicons/vue": "^1.0.6",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/typography": "^0.5.2",
    "@vuepic/vue-datepicker": "^3.0.0",
    "lodash": "^4.17.21",
    "vue3-carousel": "^0.1.38"
  }
}

And nuxt.config.js is :

import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
 
  buildModules: [
    "@nuxtjs/tailwindcss",
 
  ],
  build: {
    transpile: ['@headlessui/vue']
  },
 
  vite: {
    logLevel: "info",
    optimizeDeps: {
      include: [
        "@headlessui/vue",
        "@heroicons/vue/solid",
        "@heroicons/vue/outline",
        
      ],
    },
   
  },
});

Answer 1

FullCalendar does not seem to work in the SSR context.
To load FullCalendar on client side only I created a file called plugins/full-calendar.client.js.
The .client suffix let's the plugin only load on client side.

import '@fullcalendar/core/vdom' // solve problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

FullCalendar.options = {
    plugins: [dayGridPlugin, interactionPlugin]
}

export default defineNuxtPlugin((/* nuxtApp */) => {
    return {
        provide: {
            fullCalendar: () => FullCalendar
        }
    }
})

Then I imported the plugin into a component:

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

<script setup>
const { $fullCalendar } = useNuxtApp()
const FullCalendar = $fullCalendar()

const calendarOptions = {
  ...FullCalendar.options,
  initialView: 'dayGridMonth',
  events: [
    { title: "event 1", date: "2022-06-26" },
    { title: "event 2", date: "2022-06-27" },
  ],
}
</script>

My package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/vue3": "^5.11.1"
  }
}