Template for fiddles involving Vue & Router

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
<div id="app">
  <header>
    <a v-link="{path: '/comp1'}" class="button">
      Go to /comp1
    </a>
    <a v-link="{path: '/comp2'}" class="button">
      Go to /comp2
    </a>
  </header>
  <div id="main">
    <router-view test-prop="Test works" :bound-prop="boundData">
      <!-- Router renders components here-->
    </router-view>
  </div>
  <footer>this is the Footer</footer>
</div>

SCSS

header {
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}
footer {
  border-top: 1px solid black;
  margin-top: 10px;
}

Babel + JSX

Vue.use(VueRouter)

var App = Vue.extend({
  data: function () {
    return { boundData: "Bound Test works, too!" }
  }
}) //no need to apply an element here, we do that when we start the router later.

// The components we want to route to.
var Comp1 = Vue.extend({
  name: 'Comp1',
  props: ['testProp'],
  data() { return { name: 'Comp1'}},
  template: '<div><h5>Component 1</h5><p>This is Component 1 with {{ testProp }}</p></div>'
})
var Comp2 = Vue.extend({
  name: 'Comp2',
  props: ['testProp','boundProp'],
  data() { return { name: 'Comp2'}},
  template: '<div><h5>Component 2</h5><p>This is Component 2</p><p>{{testProp}} {{boundProp}}</p></div>'
})

var router = new VueRouter({})

// The routes
router.map({
  '/comp1': { component: Comp1 },
  '/comp2': { component: Comp2 }
})
// alias the "home screen" to comp1
router.alias({
  '/': '/comp1'
})

// start the router. 
// the App will apply to everything inside the #app div, 
// but the router will only render its stuff inside <router-view> 
router.start(App, '#app')