如何在 Nuxt 中导入 vue-full-calendar 作为插件

Question

我在让 vue-full-calendar 与 Nuxt 一起工作时遇到问题。 我已经在检查浏览器环境的插件目录中制作了一个插件 vue-full-calendar.js：

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

接下来，我将插件添加到nuxt.config.js ssr设置为"false"，如下所示：

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

我只是将其包含在我的nuxt页面文件的模板部分中：

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

但是在控制台中，我收到两个错误：

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

'Unknown custom element: <full-calendar>'

但是完整的日历组件应该全局注册，因为我将其注册为插件。

Answer 1

现在让它工作了。首先，我在插件目录中制作了一个插件"vue-full-calendar.js"。

import Vue from 'vue';
import VueFullCalendar from 'vue-full-calendar';
Vue.use(VueFullCalendar);

然后我将插件添加到 nuxt.config.js 文件中，ssr 设置为 false：

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

然后在模板部分的Nuxt页面中，我将完整日历组件设置为no-ssr组件的子组件。

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