如何在Nuxt

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＆＃39;在插件目录中。

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>