Vue router nested route transitions

TIL about Vue router transitions

Today I learned how Vue router transitions work depending on the component key, if router views are nested.

My nested route kept applying a transition but I didn’t want it to fade in/refreshing when navigating in a subcomponent/sub-route, so turns out the trick is to use the correct key.

I.e. consider which part of the path changes and use the correct one on the key:

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <keep-alive :max="10">
        <component :is="Component" :key="route.params.id" />
      </keep-alive>
    </transition>
  </router-view>
</template>