[Nuxt.js] Cannot use <template> as component root element because it may contain multiple nodes.

문제상황

Nuxt에서 아래와 같은 구문을 사용하면, 

<template>
  <template v-if="test">Show</template>
  <div v-else>Not Show</div>
</template>

다음과 같은 에러가 발생한다.

 

Cannot use <template> as component root element because it may contain multiple nodes.

 

원인 파악

에러구문 그대로 template 태그는 component의 루트 엘리먼트로 사용하지 못하기 때문인데, template 태그는 여러 개의 노드를 가지기 때문이다.

 

맨 처음 에러가 발생했을 때, 에러메세지를 정확하게 읽어보지 않고 html 자체를 렌더링하는 최상위 컨테이너 template 하위에서 다중 노드를 반환하지 않는 에러인 줄 알았으나, template 하위에도 template을 사용하지 못한다는 에러였다..

 

+ ) 착각했던 에러는 이것이었다.

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

 

해결 방법

아래와 같이 template 대신 element 태그를 반환해주면 된다.

<template>
  <div v-if="test">Show</div>
  <div v-else>Not Show</div>
</template>

 

또는, vue-fragment 라이브러리를 사용하는 방법이 있는데 자세한 사용방법은 아래를 참고한다.

Vue js error: Component template should contain exactly one root element

그런데, vue-fragment 사용은 개인적으로 비추천.. 이유는 천천히 정리해볼 예정이다.