Animating Routes with Vue Router

Demonstrate how to animate route transitions for a single-page application with Vue Router and the <Transition> component, providing a smoother user experience.
/* main.js - Setup Vue with Vue Router */
import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';
import HomeComponent from './components/Home.vue';
import AboutComponent from './components/About.vue';

// Tell Vue to use the router

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', component: HomeComponent },
    { path: '/about', component: AboutComponent }

new Vue({
  render: h => h(App)
This code sets up Vue with Vue Router, initializing the routes and mounting the main App component to the '#app' element in the index.html.
/* App.vue */
  <div id="app">
    <transition name="fade" mode="out-in">

export default {
  // Additional component options if necessary

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
This code snippet is the content of the App.vue component, which includes a <transition> wrapper around the <router-view>. It specifies a 'fade' animation for the route components as they enter and leave, with a half-second duration for the opacity transition.