[SOLVED] Vue3 router + transitions warnings

Vue3 router + transitions warnings

I have a wrapper component with a transition:

// Wrapper.vue

<template>
  <transition
    appear
    mode="out-in"
    enter-active-class="animate__animated animate__fadeIn animate__faster"
    leave-active-class="animate__animated animate__fadeOut animate__faster"
  >
    <div :key="$route.path">
      <slot />
    </div>
  </transition>
</template>

Then, I populate the default slot with some component from router as follows:

// Page.vue

<template>
  <Wrapper>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </Wrapper>
</template

And I'm getting [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. warnings, which seems weird since I'm using the correct syntax imho. Is this intended and if so, what am I missing?

Note: It works properly, I just don't like looking at warnings :)

EDIT: A bit more context - I'm trying to create wrappers for desktop and mobile devices while desktop devices should have the transition described above. The mobile device wrapper is done quite differently and is not relevant here.

Solution

The warning is not supposed to display in this scenario, but only when the "router-view" is the direct child of a "transition" or "keep-alive" component.

The bug has been reported here: https://github.com/vuejs/router/issues/1306