[vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법

Vue 부트스트랩 datepicker

내가 현업에서 사용하는 데이트피커는 vue-bootstrap-datetimepicker이다.

 

https://www.npmjs.com/package/vue-bootstrap-datetimepicker

vue-bootstrap-datetimepicker

 

Datepicker 설치하기

npm i vue-bootstrap-datetimepicker

 

DatePicker 연결하기

아래 코드로 설치한 datePicker를 연결할 수 있다.

import datePicker from 'vue-bootstrap-datetimepicker';

만약 VueNuxt 프로젝트를 이용하는 분들이라면 datepicker를 import 할 때

window is not defined 오류를 자주 만나볼 수 있다.

이는 Nuxt 서버가 돌면서 서버 측에서 랜더링을 할당 객체를 찾을 수 없어서 나는 문제이다.

이럴 경우 SSR을 제외시켜줘야 한다.

Nuxt.js Window is not defined

위의 오류가 발생한다면, 해당 import code를. vue파일에 넣지 말고 

Plugins폴더 아래에 파일을 하나 만들어서 해당 import 코드를 옮긴 뒤, 

nuxt.config.js파일의 plugins 속성에 만든 파일을 연결하고 ssr 속성을 false로 설정해주면 된다.

 

실제 코드

plugins/client.js

import Vue from 'vue'

import 'bootstrap/dist/css/bootstrap.css';
import datePicker from 'vue-bootstrap-datetimepicker';
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
Vue.use(datePicker);

nuxt.config.js

module.exports = {
.
.
  plugins: [
    { src: '~plugins/client', ssr: false }
  ],
.
.
};

Vue.js

<template>
    <div style="padding:50px; position:relative;">
        <date-picker v-model="date" :config="options"
        style="width:200px;"/>
    </div>
</template>
<script>
export default {
        data() {
            return {
                date: new Date(),
                options: {
                    format: 'YYYY-MM-DD',
                }
            }

        },
    }
</script>

 

실제 화면