Vue 2.0 Hello World

by John Passmore

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">
  <router-link to="/dashboard">Dashboard</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
  <div class="route" :style="{width: sidebarWidthPx}">
    Route:  {{routeName}}
 </div>
  <div class="sidebar" :style="{width: sidebarWidthPx}">
    Show Sidebar? {{showSidebar}}
 </div>
 <div  class="sidebar" :style="{width: sidebarWidthPx}">
    Sidebar Width: {{sidebarWidthPx}}
  </div>
</div>

CSS

.sidebar {
  margin-top: 20px;
  padding: 10px;
  background: #eee;
}
.route {
   margin-top: 8px;
   padding: 10px;
   background: #ette
}

JavaScript

const dashboard = {
	template: `<div>DASHBOARD</div>`
}
const about = {
	template: `<div>ABOUT</div>`
}

const routes = [
	{path: '/dashboard', component: dashboard, name:'dashboard'},
  {path: '/about', component: about, name:'about'}
]
const router = new VueRouter({
  routes // short for routes: routes
})
new Vue({
  el: '#app',
  router,
  data() {
    return {
      routeName: "Un-selected",
    	showSidebar: false,
      sidebarWidth: 200
    }
  },
  computed: {
  	sidebarWidthPx () {
    	return `${this.sidebarWidth}px`
    }
  },
	watch: {
  	'$route': function(value) {
			// lets watch for route changes on our
      this.routeName = value.name// main parent app component.
      if(value.name === 'about') {
      	this.showSidebar = true
        this.sidebarWidth = 500
      }else {
      	this.showSidebar = false
        this.sidebarWidth = 200
      }
    }
  }
})