colinf

controller.addModules({
  devTools: Devtools(),

  router: Router({
    '/': 'app.opened',
    '/about': 'about.opened',
    '/teams': {
      '': 'teams.opened',
      '/:id': 'teams.teamSelected'
    }

colinf

<ul className="pure-menu-list">
    <li className={classnames({'pure-menu-item': true, 'pure-menu-selected': currentPage == 'TEAMS'})}>
        <a className="pure-menu-link"
           on-click={() => signals.teams.opened()}
        >
            Teams
        </a>
    </li>
    <li className={classnames({'pure-menu-item': true, 'pure-menu-selected': currentPage == 'ABOUT'})}>
        <a className="pure-menu-link"

colinf

  <div className={classnames({'team-item': true, 'pure-g': true, 'team-item-selected': selectedTeamId === id})}
       on-click={() => signals.teams.teamSelected({id: team.id})}
  >
    <div className="pure-u-1">
      <h5 className="team-name">{name}</h5>
    </div>
  </div>

colinf

<ul className="pure-menu-list">
    <li className={classnames({'pure-menu-item': true, 'pure-menu-selected': currentPage == 'TEAMS'})}>
        <a className="pure-menu-link"
           onClick={() => signals.teams.opened()}
        >
            Teams
        </a>
    </li>
    <li className={classnames({'pure-menu-item': true, 'pure-menu-selected': currentPage == 'ABOUT'})}>
        <a className="pure-menu-link"

colinf

<div className={classnames({'team-item': true, 'pure-g': true, 'team-item-selected': selectedTeamId === id})}
       onClick={() => signals.teams.teamSelected({id: team.id})}
  >
    <div className="pure-u-1">
      <h5 className="team-name">{name}</h5>
    </div>
  </div>

colinf

<template>
  <div id='${NAME}'>
    #[[$END$]]#
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    computed: {

colinf

<template>
  <div :class="containerClass">
    <div :class="{modal: true, in: showModal}" :style="{ display: showModal ? 'block' : 'none' }">
      <div class="modal-dialog">
        <div class="modal-content">
          <div v-if="this.$slots.header || closeAction" class="modal-header">
            <button class="close" @click="closeAction">x</button>
            <slot name="header"></slot>
          </div>
          <div v-if="this.$slots.body" class="modal-body">

colinf

<template>
  <div id="app">
    <div>
      <button @click="showModal = true">Show it</button>
    </div>
    <modal :showModal="showModal" :closeAction="closeDialog">
      <h1 slot="header">Simple Dialog</h1>
      <span slot="body">
        Hello <strong>simple!</strong>
      </span>

colinf

import Vue from 'vue'
import Router from 'vue-router'
import TeamList from '../components/TeamList.vue'
import TeamDetailWrapper from '../components/TeamDetailWrapper.vue'
import About from '../components/About.vue'
import Home from '../components/Home.vue'
import NotFoundComponent from '../components/NotFoundComponent.vue'

Vue.use(Router)

colinf

<template>
  <div id="app">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-2 menu-pane">    <!-- Section 1 -->
          <ul class="nav nav-stacked">
            <li><router-link :to="teamLink">Teams</router-link></li>
            <li><router-link to="/about">About</router-link></li>
          </ul>
        </div>