JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
   rnd: {{ rnd}}
  </p>
  <p>

    <router-link to="/foo">Go to Foo</router-link> | 
    <router-link to="/bar">Go to Bar</router-link> | <router-link to="/baz">Go to Baz (Bar)</router-link>
  </p>

  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" :key="rnd"/>
    </transition>
  </router-view>
  
  <router-view></router-view>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

JavaScript

const Foo = {
  template: '<div>Foo</div>'
}
const Bar = {
  template: 
  `<div>
  	<transition name="fade">
    <div>BAAAARRRRR</div>
    </transition>
  </div>`
}


const routes = [{
    path: '/',
    redirect: '/foo'
  },
  {
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  },
  {
    path: '/baz',
    component: Bar
  },
]


const router = VueRouter.createRouter({

  history: VueRouter.createWebHashHistory(),
  routes,
})


const app = Vue.createApp({
  setup: () => {
  	const route = VueRouter.useRoute()
    const rnd = Vue.computed(() => route.path);

    return {
      rnd
    }
  }
})

app.use(router)

app.mount('#app')

// Now the app has started!