[Nuxtjs] How to set v-calendar

If you saw error messages like below, let’s do that like me.

[server side]

[Vue warn]: Error in created hook: “ReferenceError: window is not defined"
✖ error ReferenceError: window is not defined

[client side]

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I guess that you set server side rendering. So, we need to use ‘ssr: false’ option and <no-ssr>. Also import css for v-calendar.

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

plugins: [
{ src: '~plugins/v-calendar.js', ssr: false }

:min-date="new Date()"
export default {
data() {
return {
selectedDate: {
start: new Date(2018,10,9),
end: new Date(2018,10,10)
<style lang="scss" scoped>


I’m Korean