nuxt vue2 라이브러리 window is not defined 해결

기존 php 기반 legacy에서 nuxt 로 마이그레이션 하면서 vue-scroll-picker를 nuxt vue2에서 사용해야하는 상황

1. 우선 제공받은 가이드대로 바로 local components 에 추가했다.

<template>
<div>
    <ScrollPicker />
</div>
</template>
<script>
import { ScrollPicker } from 'vue-scroll-picker'
export default{
    components: {
        ScrollPicker
    }
}
</script>

결과는..... window is not defined 500error로 접속되지 않았다.

 

2. nuxt에서 개발하면서 가장 많이 접해본 window is not defined. 제일 간편하게 사용했던 아래 방법으로 진행해보았다.

<template>
<div>
    <client-only>
        <ScrollPicker />
    </client-only>
</div>
</template>
<script>
import { ScrollPicker } from 'vue-scroll-picker'
export default{
    components: {
        ScrollPicker
    }
}
</script>

결과는 똑같이 window is not defined. 아직 원인을 찾아보지는 못했지만, 아마 ScrollPicker 자체에서 랜더링 전에 window를 호출하는게 아닐까 의심중이다.

 

3. 혹시몰라서 components를 비동기방식으로 import 해보았다.

<template>
<div>
    <client-only>
        <ScrollPicker />
    </client-only>
</div>
</template>
<script>
export default{
    components: {
        ScrollPicker: () => import('vue-scroll-picker')
    }
}
</script>

vue-scroll-picker 안에 ScrollPicker를 객체에 담아 export 해주는 방식인지 위 코드로 작성했을 때 window is not defined 에러에서는 벗어나서 페이지 호출은 되지만, ScrollPicker component not defined로 해당 컴포넌트를 호출하지 못했다.

 

4. 결국 local components로 호출하는건 뒤로 미루고, plugin으로 생성해서 nuxt.config.js에 plugins에 추가해서 csr mode로 호출하는 방식으로 변경했다.

// scroll-picker.js
import Veu from 'vue'
import { ScrollPicker } from 'vue-scroll-picker'

Vue.component('ScrollPicker', ScrollPicker)


// nuxt.config.js
...
css: [
    ...
    'vue-scroll-picker/dist/style.css'
],
plugins: [
    ...
    {src: '~/plugins/scroll-picker.js', mode: 'client'},
]
...

전체 페이지 퍼포먼스에 영향을 끼칠 것 같아서 gloabal 선언은 지양하는 편인데 .... 쌓인 일이 많아서 우선 급한대로 개발해두고,  추후에 더 좋은 방법을 찾으면 다시 시도해 볼 예정이다.

 

혹시 제가 시도해보지 못한 더 좋은 방법을 알고 있으신 분이 이 글을 보신다면 댓글로 조언 부탁드립니다 🙏