Vue.js page transition fade effect with vue-router

Question

How to achieve a fade effect page transition between vue-router defined pages (components)?

Answer 1

Plug and Play Solution

There is also a plug and play solution called vue-page-transition which offers you all sort of transitions. (fade, flip, zoom, overlay etc.)

1 - Install the npm package:

yarn add vue-page-transition

2 - register the plugin:

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

3 - wrap your router-view with the global animation:

Learn more on GitHub: https://github.com/Orlandster/vue-page-transition