JSFiddle - React, Tailwind, and code Playground

by gurghet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.13/vue-router.js"></script>
<header><h1>
My title: {{title}}
</h1></header>
<p>
  <!-- use v-link directive for navigation. -->
  <a v-link="{ path: '/foo' }">Go to Foo</a>
  <a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
<footer>Such footer, many links, wow!</footer>

JavaScript

// define some components
var Foo = Vue.extend({
  template: '<p>This is foo!</p>',
  ready () {
  	this.$parent.title = "Foo Title"
  }
})

var Bar = Vue.extend({
  template: '<p>This is bar!</p>',
  ready () {
  	this.$parent.title = "Bar Title"
  }
})

var App = Vue.extend({data () {return {title: 'Ciao'}}})

var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

router.start(App, 'body')