Nuxt를 이용하여 개발중인데 <NuxtLink>, <NuxtPage> 컴포넌트 사용 시 주의할 점이 있어서 기록을 남김.
<NuxtLink>:<NuxtLink>는 Vue Router의<RouterLink>구성 요소와 HTML의<a>태그를 대체하여 사용함. 링크가 내부인지 외부인지 프레임워크 자체적으로 결정하고 그에 따라 사용 가능한 최적화(프리페칭, 기본 속성 등)를 사용하여 링크를 렌더링해 줌.<NuxtPage>: 페이지/디렉토리에 있는 최상위 페이지나 중첩 페이지를 표시하기 위한 컴포넌트.
Nuxt의 Routing을 이용하여 Navigation 구성을 하기 위해서는 위 두 개의 컴포넌트를 활용해서 구성하는데 하다보니 처음 뜰 때만 재대로 나오고 내비탭을 통해 이동 시 빈 페이지만 나오고 콘솔에서 Warn 뜨는 현상이 발생했다.
경고문구 : Component inside <Transition> renders non-element root node that cannot be animated.
구글링도 해보고 공식 사이트 이슈사항도 체크해보니 Page 내부에 하나의 Root Element가 없을 경우 문제가 발생한다고 했다.
내가 작업한 디렉토리 구조
[Root] └ [case] | └[id].vue app.vue
app.vue
<script setup> const tabs = [ { name: '1', href: '/case/1', current: false }, { name: '2', href: '/case/2', current: false }, { name: '3', href: '/case/3', current: false }, ] </script> <template> <div> <div> <nav> <NuxtLink v-for="(tab, tabIdx) in tabs" :key="tab.name" :to="tab.href" /> </nav> </div> </div> <!-- 탭 패널 영역 --> <div> <NuxtPage /> </div> </template>
[id].vue
<script setup lang="ts"> const route = useRoute() </script> <template> <div> case child vue<br> </div> <div> page id : {{ route.params.id }} <div> </template> <style scoped lang="scss"> </style>
app.vue 파일과 [id].vue 파일을 보면 하나의 root element로 감싸져 있지 않아서 발생하는 문제였다.
app.vue (수정)
<script setup> const tabs = [ { name: '1', href: '/case/1', current: false }, { name: '2', href: '/case/2', current: false }, { name: '3', href: '/case/3', current: false }, ] </script> <template> <div> <!-- Root Element 추가 --> <div> <div> <nav> <NuxtLink v-for="(tab, tabIdx) in tabs" :key="tab.name" :to="tab.href" /> </nav> </div> </div> <!-- 탭 패널 영역 --> <div> <NuxtPage /> </div> </div> </template>
[id].vue (수정)
<script setup lang="ts"> const route = useRoute() </script> <template> <div> case child vue<br> page id : {{ route.params.id }} </div> </template> <style scoped lang="scss"> </style>
이렇게 template 태그 내 root div 태그를 구성하면 문제가 해결된다.
[ 참고 ]
GIS, OpenLayers, OpenSource, Web, Server 관련 개발