Router Views

Introduction

Router views are by and large unaffected by any breaking changes, except for how to use <transition> and <keep-alive> with them:

In the Vue 2 app

our app's App.vue contains a router link, which we wrapped in a <transition> to get nice transition effects between components.

<transition name="fade" mode="out-in">
  <router-view />
</transition>

Migrating to Vue 3

In VueRouter 4 / Vue 3, we now need to put the transition inside of the router-view's slot and pass the actual component to be rendered to a dynamic component:

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component v-bind:is="Component" />
  </transition>
</router-view>

(Documentation)

keep-alive

Your example app doesn't make use of keep-alive, but the fix for that is exactly the same as for the transition above, so I think you will make it work :)

Further Reading

• VueRouter Migration Guide