Vue3 Component name "Button" should always be multi-word 에러 해결

오류명

Component name "Button" should always be multi-word

 

 

오류 상황

// main.js
import Button from 'primevue/button';
import Badge from 'primevue/badge';

const app = createApp(App)

// component를 추가하려고 할 때 에러 발생
app.component('Button', Button)
app.component('Badge', Badge)

 

 

환경

• Vue3
• Node v20.11.1

"devDependencies": {
  "@babel/core": "^7.12.16",
  "@babel/eslint-parser": "^7.12.16",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "eslint": "^7.32.0",
  "eslint-plugin-vue": "^8.0.3"
},

 

 

원인

eslint의 규칙으로 컴포넌트명을 여러 구성요소로(단어 조합하여) 이름을 지어야 합니다.

ex) Button (x)  /  BaseButton (○)

 

 

해결

• 작성 위치: 프로젝트/package.json

※ package.josn 수정 후

npm install로 package 정보를 최신화 한 뒤에 npm run serve 실행을 하여야 적용 됩니다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}  // 이 부분에 vue/multi-word-component-names 설정을 넣어주면 됩니다.

 

 

방법1

vue/multi-word-component-names 에러 사항을 ignores(무시)할 이름을 작성해줍니다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      // [이 부분 시작] - 이 부분을 넣어줍니다.
      "vue/multi-word-component-names": ["error", {
        "ignores": ["Button", "Badge"]
      }]
      // [이 부분 끝]
    }
  },

 

 

방법2

전체적으로 vue/multi-word-component-names 체크를 하지 않는 설정이 없을까 해서

"off", "N", "False" 등 여러가지를 넣어봤는데 "off"로 할 경우 정상 동작되었습니다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      // [이 부분 시작] - 이 부분을 넣어줍니다.
      "vue/multi-word-component-names": "off"
      // [이 부분 끝]
    }
  },

 

 

방법3

 

전체적으로 vue/multi-word-component-names 체크를 하지 않는 설정이 없을까 해서

"off", "N", "False" 등 여러가지를 넣어봤는데 0으로 할 경우 정상 동작되었습니다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      // [이 부분 시작] - 이 부분을 넣어줍니다.
      "vue/multi-word-component-names": 0
      // [이 부분 끝]
    }
  },

 

 

참고

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

vue/multi-word-component-names | eslint-plugin-vue