Sometimes, we want to add a page transition fade effect with Vue Router and Vue.js.

In this article, we’ll look at how to add a page transition fade effect with Vue Router and Vue.js.

How to add a page transition fade effect with Vue Router and Vue.js?

To add a page transition fade effect with Vue Router and Vue.js, we wrap the transition component around the router-view component and add our transition styles.

For instance, we write

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
//...
export default {
  //...
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

to add the the transition component and set its name prop to 'fade'.

We wrap it around router-view so that we see the transition effect when we change routes.

And we add the transition effect styles in the style tag.

The name prop should be the prefix for the classes listed in the style tag so the transition styles would be applied.

Conclusion

To add a page transition fade effect with Vue Router and Vue.js, we wrap the transition component around the router-view component and add our transition styles.