vue3 - The template root requires exactly one element 해결(vetur)

cointreau·2022년 10월 18일
0

vue3_시작

목록 보기
1/1

현상

vue3 를 배우는 중인데, 강좌에서 권하는 대로 vscode/vetur 를 설치하고 나니 계속해서 아래 에러가 떴다.

The template root requires exactly one element


원인

vue2 에서는 root div 태그가 필수적이었는데, vue3 로 넘어오면서 불필요한 root div 태그를 사용할 필요가 없게 되었다.
그런데 vetur 는 vue2 를 기본으로 인식하고 있어서 그런 문제가 발생한 것 같다.

해결

두가지 방안이 있었다. vue2 도 자주 사용하는 경우 방법 1을, vue3 만 사용하는 경우 방법 2를 사용하면 될 것 같다. 나는 vue3 만 사용하기 때문에 방법 1을 하지 않고 방법 2 대로 했다.

방법 1. vetur validation check 를 꺼주기

stackoverflow 를 검색했을 때는 validation check 를 꺼주면 된다고 하는데 그럼 vetur 를 사용하는 의미가 약간 퇴색되지 않나 싶어서, vue3 를 정식으로 지원하는 다른 플러그인 volar 를 사용하기로 했다.

방법 2. vetur 삭제, volar 설치

  1. extension에서 vetur 를 검색해서 uninstall
  2. extension 에서 volar 검색해서 install

참고사이트
https://stackoverflow.com/questions/64867504/vue-3-the-template-root-requires-exactly-one-element-eslint-plugin-vue
http://romeoh.tistory.com/m/403

0개의 댓글