JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

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

Babel + JSX

var bus = new Vue()
// 2. Define route components
const Home = { template: '<div>home</div>',mounted(){bus.$on('event-to-home',()=>{console.log('event received by Home component')})},
beforeDestroy(){bus.$off('event-to-home')}
}
const Foo = { template: '<div>foo</div>' }

// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

// 4. Create and mount root instance.
// Make sure to inject the router.
// Route components will be rendered inside <router-view>.
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Basic</h1>
      <ul>
        <li><router-link to="/">/home</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
      </ul>
      <button @click="clickme">click me</button>
      <router-view class="view"></router-view>
    </div>
  `,
  methods: {
     clickme: function(){
     	bus.$emit('event-to-home','string from click')
     }
  }
}).$mount('#app')