JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  <div class="row">
    <my-child1></my-child1>
    <my-child2></my-child2>
  </div>
  <div class="row">
    <my-child3></my-child3>
    <my-child4></my-child4>
  </div>
</div>

CSS

.row {
  display: flex;
}

.row > * {
  border: 1px solid red;
  flex: 1;
  height: 100px;
  margin: 5px;
}

JavaScript

const routes = [
  {
    path: '/page1',
    component: { template: '<p>Page 1</p>' }
  }, {
    path: '/page2',
    component: { template: '<p>Page 2</p>' }
  }, {
    path: '/page3',
    component: { template: '<p>Page 3</p>' }
	}
]

const MyChild = {
  template: `
    <div>
      <router-link to="/page1">Page 1</router-link>
      <router-link to="/page2">Page 2</router-link>
      <router-link to="/page3">Page 3</router-link>
      <button @click="$router.back()">Back</button>
      <div>{{ $route.path }}</div>
      <router-view />
    </div>
  `
}

function getChild() {
	return {
    extends: MyChild,
    router: new VueRouter({
      mode: 'abstract',
      routes
    })
  }
}

new Vue({
  components: {
    MyChild1: getChild(),
    MyChild2: getChild(),
    MyChild3: getChild(),
    MyChild4: getChild()
  }
}).$mount('#app')