JSFiddle - React, Tailwind, and code Playground

by budiadiono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<div id="app"></div>

JavaScript

var Button = Vue.extend({
	template: '<button>The Button</button>'
})

var ThePlugin = {
	install(Vue) {
		if (this.installed) return;
		Vue.component('my-btn', Button)
  }
}

var DemoBase = Vue.extend({})
var DemoPage1 = DemoBase.extend({
	template: '<div><h2>Page 1</h2><my-btn></my-btn></div>'
})
var DemoPage2 = Vue.extend({
	template: '<div><h2>Page 2</h2><my-btn></my-btn></div>'
})

Vue.use(VueRouter);
Vue.use(ThePlugin);

var routes = [
	{ path: '/p1', component: DemoPage1 },
	{ path: '/p2', component: DemoPage2 }
]

var router = new VueRouter({
	routes
})

var App = Vue.extend({
	template: `<div>
		Hello!
		<router-link to="/p1">Page1</router-link>
		<router-link to="/p2">Page2</router-link>
		<router-view></router-view>
	</div>`
})

new Vue({
	router,
	render: h => h(App),
	
}).$mount('#app', true);