NuxtLink is updating route in nuxt 3 app, but not rendering contents

user_7009215 0
Viewed 2827

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:

Folder Structure

Illustration

nuxtjs3 nuxt.js vuejs3 vue.js
1 Answers

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>
user_62771510
Related