JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h2>{{url}}<h2>
  <h1>HEADER</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/dash">Dashboard</router-link>
    <router-link to="/case">Case Editor</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
  <h1 class="footer">FOOTER</h1>
</div>

CSS

.router-link-active {
  color: red;
}
.panel {
  position: relative;
  width:100%;
  height:300px;
  margin:30px;
  border:1px solid green;
  font-size: 40px;
}
h1 {
  background-color: yellow;
}
.footer {
  position:fixed;
  bottom:10px;
}

Babel + JSX

// 0. If using a module system, call Vue.use(VueRouter)

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div class="panel dashboard">Dashboard</div>' }
const Bar = { 
	template: '<div class="panel caseedit">Case Editor {{caseno}}</div>',
  data: function(){
  	return {caseno:0}
  },
  created: function(){
  	console.log("help");
  	setInterval(function(){this.caseno++}.bind(this),1000);
  }
 }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/dash', component: Foo },
  { path: '/case', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router,
  data:function(){
  	return {url:'fred'}
  },
  created: function(){
  	setInterval(function(){this.url = location.href }.bind(this),1000);
  }
}).$mount('#app')

// Now the app has started!