JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
<div id="app"></div>

JavaScript

const { createApp, defineAsyncComponent, h } = Vue
const { createRouter, createWebHashHistory } = VueRouter

const mockImport = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: `<div>Other component</div>`
      })
    }, 2000)
  })
}

const routes = [
  {
    path: '/',
    component: {
      template: `
	      <div>
          First component
          <router-link to="/other">Click</router-link>
        </div>
      `
    }
  }, {
    path: '/other',
    component: () => mockImport('./blah.vue')
  }
].map(route => {
  // This only considers the simple case with an unnested component
  const { component } = route
  
  if (typeof component === 'function') {
    const asyncComponent = defineAsyncComponent(component)
    
    route.component = {
      render () {
        return h(asyncComponent, this.$attrs, this.$slots)
      }
    }
  }
  
  return route
})

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

const app = createApp({
  template: `
    <div>
      <router-view v-slot="{ Component }">
        <template v-if="Component">
          <suspense timeout="0">
            <component :is="Component"></component>
            <template #fallback>
              <div>
                Loading...
              </div>
            </template>
          </suspense>
        </template>
      </router-view>
    </div>
  `
})

app.use(router)

app.mount('#app')