JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <keep-alive include="bar">
    <router-view></router-view>
  </keep-alive>
</div>

JavaScript

const Foo = {
	name: 'foo',
  template: '<div><p v-for="n in numbers">{{ n }}</p></div>',
  data: function() {
  	return {
    	numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}

const Bar = {
	name: 'bar',
	template: '<div><p v-for="n in numbers"><strong>{{ n }}</strong></p><input type="text"/></div>',
  data: function() {
  	return {
    	numbers: [Math.round(Math.random() * 10), Math.round(Math.random() * 10)]
    }
  }
}

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

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');