[vue 3] vue/no-multiple-template-root 오류 처리

이번 포스트는 vue/no-multiple-template-root 오류 처리에 대해 알아보자.

 

vue/no-multiple-template-root 오류 처리

 

강의장에서 사용하던 소스 코드를 집에서 열어보니 느닷없이 위의 오류가 뿜어져 나오고 있었다. SFC기반으로 Vue 컴포넌트 작성중 발생한 오류이다.

Vue2까지는 <template>에 반드시 root element가 있어야 했기 때문에 익숙한 오류이긴 한데.. 현재는 Vue3로 작업 중이고 여기서는 그런 제약이 없어졌다.

그럼 도대체 이 녀석은 왜 나오는 것일까?

오류의 범인은 누구냐?

vscode에서 Vue를 개발하면서 이것 저것 플러그인을 많이 설치하다 보니 누가 이런 오류를 뿜어내는지 알쏭달쏭 했다.

그중에 인터넷에 보니 Vetur를 지목하는 글이 많다.  Vuter는 Vue2에서 주요 extention이었는데 vue3로 오면서 volar로 새대교체 된 녀석이다.  혹시 토사구팽되어서 시위하는건가?

빙고~~

이 녀석을 uninstall 하니 관련 오류도 없어졌다. 그동안 고생 많았네. Vetur~~

앞으로는 Vetur 말고 Volar를 사용하자.