Vue3 - The template root requires exactly one element 해결(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