0
1.1K
VistasNuxtLink is updating route in nuxt 3 app, but not rendering contents
I am trying to use route using NuxtLink in a Nuxt 3 app, and it's changing the route, but it's not showing any contents. But, if I refresh or reload the updated route which was blank ago, then it's showing it's content normally.
/pages/index.vue
<template>
<div>
<h1>It's Nuxt3!</h1>
<p>Home Page</p>
</div>
<NuxtLink to="/user">User</NuxtLink>
</template>
/pages/user.vue
<template>
<div>
<h1>It's Nuxt3!</h1>
<p>User Page</p>
</div>
</template>
Folder Structure & Illustration:
1 Respuestas
Responde la pregunta0
The console warning from Vue provides a helpful hint:
[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated.
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< VueInstance > key="/" >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="page" mode="out-in" >
at <NuxtLayout key=0 name=undefined >
at <RouterView>
at <NuxtPage>
at <App>
at <NuxtRoot>
The log points to <Index> (i.e., index.vue), and we see that the component there has two root nodes, which Vue wraps together in a fragment node, leading to the "non-element root node" warning:
<template>
<div> 1️⃣ <!-- root node -->
<h1>Hello, World</h1>
<p>It's Nuxt3!</p>
</div>
<NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node -->
</template>
Technically, this should be supported in Nuxt 3, which uses Vue 3, which supports multiple root nodes, but I'm not sure why that's not allowed in this scenario.
A workaround is to wrap the component's template with a single element, such as a div:
// index.vue
<template>
<div> 👈 <!-- single root node -->
<div>
<h1>Hello, World</h1>
<p>It's Nuxt3!</p>
<div>
<NuxtLink to="/user">User</NuxtLink>
</div>
</template>