[Vue.js/konva] 파스칼 케이스로 작성했을 때 konva 컴포넌트가 불러와지지 않는 문제

[ 문제 상황 ]

vue-konva는 기본적으로 컴포넌트명에 'v-' 접두사를 붙여서 케밥 케이스로 사용한다.

ex) v-stage, v-text, ...

 

이전에 다른 프로젝트에서는 괜찮았는데, 이번 프로젝트는 저장 시 컴포넌트명이 자동으로 파스칼 케이스로 변환되도록 규칙이 설정되어 있어서 컴포넌트 인식이 안되는 문제가 발생했다.

<VStage :config="containerConfig">
    <VLayer>
        <VText :config="{ text: 'temp', fontSize: 15 }" />
    </VLayer>
</VStage>

[Vue warn]: Failed to resolve component: VStage If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <PaybackChallenge onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView > at <AppLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > at <RouterView > at <App>

 

[ 해결 ]

main.ts에 VueKonva를 등록할 때 prefix를 변경해주면 된다.

import VueKonva from 'vue-konva'

// 생략

app.use(VueKonva, { prefix: 'V' })
app.mount('#app')