[Nuxtjs] Как установить v-календарь

Если вы видели сообщения об ошибках, подобные приведенным ниже, давайте сделаем то же самое, что и я.

[сторона сервера]

[Vue warn]: Ошибка в созданном хуке: «ReferenceError: окно не определено.

✖ ошибка ReferenceError: окно не определено

[сторона клиента]

[Предупреждение Vue]: отображаемое на стороне клиента виртуальное дерево DOM не соответствует отображаемому на сервере содержимому. Вероятно, это вызвано неправильной разметкой HTML, например, вложением элементов уровня блока внутри ‹p› или отсутствием ‹tbody›. Обеспечение гидратации и выполнение полного рендеринга на стороне клиента.

Я предполагаю, что вы устанавливаете рендеринг на стороне сервера. Итак, нам нужно использовать параметр «ssr: false» и ‹no-ssr›. Также импортируйте css для v-calendar.

[/plugins/v-calendar.js]
import Vue from 'vue'
import Vcalendar from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';
Vue.use(Vcalendar, {             // second is optional
  datePickerTintColor: '#F00',
  datePickerShowDayPopover: false
})
[nuxt.config.js]
plugins: [
  ...
  { src: '~plugins/v-calendar.js', ssr: false }
]
[component.vue]
<template>
  <div>
    <no-ssr>
      <v-date-picker
        mode="range"
        v-model="selectedDate"
        :min-date="new Date()"
        show-caps
      />
    </no-ssr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedDate: {
        start: new Date(2018,10,9),
        end: new Date(2018,10,10)
      }
    }
   }
}
<style lang="scss" scoped>
</style>

Заканчивать.