I'm using vue 3 with vue router, and I used the same code from the docs for transitioning the route, and it worked at first, but after some changes in the code in other files, it decided not to work ;-;

Here is my app.vue

<template>
  <Nav />
  <router-view v-slot="{ Component }">
    <transition name="Fade">
      <div>
        <component :is="Component" />
      </div>
    </transition>
  </router-view>
</template>

<script>
import Nav from "@/components/Nav.vue";

export default {
  name: "HomeView",
  components: {
    Nav,
  },
};
</script>

<style scoped>
.Fade-enter-from,
.Fade-leave-to {
  opacity: 0;
  transform: translateX(120px);
}
.Fade-enter-active,
.Fade-leave-active {
  transition: all 0.5s ease-in;
}
</style>

and here's the Main Route

<template>
  <div>
    <WText />
    <Softwares />
  </div>
</template>

<script>
import WText from "@/components/WText.vue";
import Softwares from "@/components/Softwares.vue";

export default {
  components: {
    WText,
    Softwares,
  },
};
</script>

The other route (contact) is just an empty vue file, nothing special.