examples/discrete-components/index.html

<!DOCTYPE html>
<link rel="stylesheet" href="/global.css">
<style>
  .inliner {font-size:0;line-height:0;}
  .app {font-size:1rem;line-height:1;display:inline-block;padding:1rem;width:33%;border-left:1px solid #f1f1f1;box-sizing:border-box;vertical-align:top;}
  .snippet {display:inline-block;padding:5px;background:#f1f1f1;font-size:90%;}
  .app.component-view {display:block;width:100%;text-align:center;}
</style>
<a href="/">&larr; Examples index</a>
<div class="inliner">
  <div class="app">
    <ul>
      <li><router-link to="/">/</router-link></li>
      <li><router-link to="/foo">/foo</router-link></li>
      <li><router-link to="/bar">/bar</router-link></li>
    </ul>
    $route.path value: <span class="snippet">{{ $route.path }}</span>
  </div>
  <div class="app">
    <ul>
      <li><router-link to="/">/</router-link></li>
      <li><router-link to="/foo">/foo</router-link></li>
      <li><router-link to="/bar">/bar</router-link></li>
    </ul>
    $route.path value: <span class="snippet">{{ $route.path }}</span>
  </div>
  <div class="app">
    <ul>
      <li><router-link to="/">/</router-link></li>
      <li><router-link to="/foo">/foo</router-link></li>
      <li><router-link to="/bar">/bar</router-link></li>
    </ul>
    $route.path value: <span class="snippet">{{ $route.path }}</span>
  </div>
</div>
<div class="app component-view">
  <router-view class="view"></router-view>
  $route.path value: <span class="snippet">{{ $route.path }}</span>
</div>
<script src="/__build__/shared.js"></script>
<script src="/__build__/discrete-components.js"></script>