JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.min.js"></script>
<div id="app">
  <p v-for="route in routes">
    <a v-link="{path : route}">{{route}}</a>
  </p>
  <router-view></router-view>
</div>

CSS

.v-link-active {
  color: red;
}

JavaScript

var Foo = Vue.extend({
  template: '<p>This is foo!</p>'
})

var Bar = Vue.extend({
  template: '<p>This is bar!</p>'
})

var router = new VueRouter()

var map = {
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
}

var routes = Object.keys(map)

var App = Vue.extend({
  data: function() {
    return {
      routes: routes
    }
  }
})

router.map(map)
router.start(App, '#app')