[Vue.js] Component name should always be multi-word 에러

에러 발생

Header와 Footer component 생성 후 빌드 시 아래와 같은 에러 발생

Component name "Header" should always be multi-word vue/multi-word-component-names

Component name "Footer" should always be multi-word  vue/multi-word-component-names

 

 

에러 원인

에러 문구에 나와 있듯이 에러의 원인은 컴포넌트 명칭이 하나의 단어로 되어 있기 때문에 발생하고 있다.

Vue에서는 컴포넌트나 name을 만들 때, 두 단어의 조합으로 해야한다는 규칙이 있다.

그래서 위와 같이 Header나 Footer 등의 일반적인 이름도 에러로 인식한다.

 

 

해결 방법

1. 2가지 이상의 단어 조합으로 컴포넌트명 변경

ex) Header → CommonHeader

 

 

2. ESLint 설정 변경 (lintOnSave:false)

vue.config.js 파일에 lintOnSave: false 설정값 추가

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false // 해당 설정 추가
});

 

 

문제없이 잘 실행된다!