[Vue] [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 에러 해결 방법

해당 오류 메세지

 

Vue 프레임워크로 프론트엔드 및 퍼블리싱 작업을 진행할 때, 많이 볼 수 있는 경고 메세지다.

 

Vue의 template 안에는 하나의 root 엘리먼트만 존재해야 한다.

root element 밖에 어떠한 엘리먼트가 존재하면 발생하는 경고 메세지로, 간단하게 수정할 수 있다.

 

다음과 같이 소스를 수정해주면 된다.

 

▼ warning

<script setup>

...

</script>
<template>
	<div>warning 메세지 보고싶다.....</div>
    <section>
    	<v-card>
        	<v-card-title>
            	good life
            </v-card-title>
            <v-row> ... </v-row>
            <v-row> ... </v-row>
            <v-row> ... </v-row>
        </v-card>
    </section>
</template>

 

▼ 처리

<script setup>

...

</script>
<template>
    <section>
    	<div>warning 메세지가 안보인다.....</div>
    	<v-card>
        	<v-card-title>
            	good life
            </v-card-title>
            <v-row> ... </v-row>
            <v-row> ... </v-row>
            <v-row> ... </v-row>
        </v-card>
    </section>
</template>