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

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

Finish.

I’m Korean