3

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.

Jakub Kylián
  • 259
  • 3
  • 12

2 Answers2

4

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

JeremyM4n
  • 750
  • 5
  • 10
2

By official guide you should use <transition> or <keep-alive> inside <RouterView /> and vice-versa not applicable.

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

<router-view> exposes a v-slot API mainly to wrap your route components with <transition>, <keep-alive> components.

update:

A computed property may be helpful for this scenario. Tough, I don't know how you've implemented code for small devices. This is one way of doing...

<script>
function isSmallDevice() {
  /*
    code for checking
    device resolution
  */

  return <Boolean>
}

export default {
  computed: {
    setTransitionProperty: function () {
      return isSmallDevice ? '' : 'fade'
    }
  }
}
</script>

<router-view v-slot="{ Component, route }">
  <transition :name="setTransitionProperty" mode="out-in">
    <template #default>
      <component
        :is="Component"
        :key="route.meta.usePathKey ? route.path : undefined"
      />
    </template>
    <template #fallback> Loading... </template>
  </transition>
</router-view>

Another way may be conditional rendering, using v-if, and v-else directives.

Bubai
  • 1,155
  • 1
  • 10
  • 20
  • Yeah, I think I understand the concept but in the scenario I described above, I *do not* use the `` directly inside the transition - there is the div that holds the default slot, ie. the final router-view. Maybe a bit more context - I'm trying to make wrappers for desktop and mobile devices while desktop ones should have transition there -> this is the "desktop wrapper". – Jakub Kylián Jan 25 '22 at 12:35
  • Thanks for the update, but I can't use this approach as well. Basically, the mobile wrapper uses completely different layout and I need to have it in separate files. Maybe let me clarify - I don't have issues with the functionality, it works perfectly fine, but the warnings make me mad because it thinks I'm using the `router-view` directly inside transition while it's not true because it's wrapped in the `div` – Jakub Kylián Jan 26 '22 at 14:29
  • Well actually... I could technically use what you're proposing but there would be some downsides (at least in my specific case) so I'll probably just move the transitions into each component. Anyway, I still don't understand why the warnings are there. I will eventually mark this as answered if nothing better comes up. – Jakub Kylián Jan 26 '22 at 17:10
  • Unfortunately, this answer doesn't answer the question or solve the issue. My suspicion is that there's a bug in Vue Router that is causing it to show the warning even when the router-view is NOT used directly inside the transition. It would be great to understand why the error is shown, if it's not a bug. – JeremyM4n Feb 12 '22 at 00:34
  • I agree that this is just a workaround (and rather not-really-usable in some specific cases), so let me reopen this issue so more people might notice. – Jakub Kylián Feb 13 '22 at 11:13