如何将FullCalendar与Nuxt3结合使用？未定义获取__vite_ssr_import_1__

Question

尝试用FullCalendar (Vue)版本3安装NuxtJS。

这一证监会的结果是一个ERROR [worker] __vite_ssr_import_1__ is not defined与nuxi开发。

我尝试了https://github.com/fullcalendar/fullcalendar-vue/issues/5和https://github.com/fullcalendar/fullcalendar-vue/issues/152的变体

我尝试在nuxt中使用@全职日历/通用的解决方法，并将其移植到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>

目前的package.json是：

{
  "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"
  }
}

nuxt.config.js是：

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在SSR环境下似乎不起作用。

为了只在客户端加载FullCalendar，我创建了一个名为plugins/full-calendar.client.js的文件。

.client后缀让我们只在客户端加载插件。

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
        }
    }
})

然后我将插件导入到组件中：

<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>

我的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"
  }
}