[Vue3 에러] Component name should always be multi-word 에러 해결

참고

https://eslint.vuejs.org/rules/multi-word-component-names.html#vue-multi-word-component-names

 

에러

보통 컴포넌트 파일 이름을 지을 때 xxComp.vue 라고 하는 편인데

이번엔 'Comp' 는 빼고 그냥 xx.vue 형식으로 파일 이름을 지었더니 아래같은 에러가 발생했다.😦

 

컴포넌트 이름은 항상 여러 단어로 이루어져있어야 된다는 뜻의 에러인데..

왜 Vue 컴포넌트의 이름은 항상 여러 단어여야 하는걸까? 궁금해서 찾아보았다. 

 

원인

eslint-plugin-vue 공식문서에서 vue/multi-word-component-names 규칙에 관해 찾아보았다.

단일 단어로 구성된 HTML 엘리먼트와의 충돌을 방지하기 위해 vue에서 제공하는 빌트인 컴포넌트를 제외한 컴포넌트의 이름은 항상 여러 단어로 구성되어야 한다고 한다.

 

해결

아래처럼 다중 단어로 이뤄진 이름을 사용하면 에러가 깔끔하게 해결된다!

vue/multi-word-component-names 규칙을 꺼두는 것으로도 해결할 수 있었겠지만,

가급적이면 규칙을 따르고자 그냥 이름을 바꿔줬다.