[vue/no-multiple-template-root]The template root requires exactly one element 에러 해결

현재 본인은 vue3을 사용하고 있는데 제목의 에러가 발생했다

구글링해 본 결과 vue2는 vetur를 쓰면 되고 vue3은 volar를 쓰면 된다고 나와있는데 volar를 확장프로그램에서 발견하지 못해 다른 방법을 찾았다.

 

단순하게 vue3에서는 다른 태그들을 div 태그로 전체를 묶어줘야 해결이 된다고 한다.

이렇게 말이다.

 

리액트에서 프래그먼트를 설정해주는 방식과 동일한 것 같다.

const moon = () > {
	return (
    	<>
       	  <div>moon</div>
        </>
    )
}