Design in the browser, activity 11: update main.js

main.js

// import Vue framework
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'

// tell vue to use the packages loaded from vue-resource, and vue-router
Vue.use(Resource)
Vue.use(Router)

// turn on dubugging messages
Vue.config.debug = true

// import our components
import StyleGuideView from './StyleGuideView.vue'
import CafeGridView from './CafeGridView.vue'
import CafeCard from './CafeCard.vue'
import GoogleMap from './GoogleMap.vue'

// tell vue the tags we want to use for our components
// because we don't use StyleGuideView or CafeGridView as tags, but instead through the mounter we don't need to define tags for their use
Vue.component('cafe-card', CafeCard)
Vue.component('google-map', GoogleMap)

// create the router object
var router = new Router()

// configure the router to tell it what component to swap out with <router-view> depending
// on what the current URL matches.
router.map({
  '/city/:city': {
    component: CafeGridView
  },
  '/styleguide': {
    component: StyleGuideView
  }
})

// the default route to use if none of our matching rules match
router.redirect({
  '*': '/styleguide'
})

// this is a bit cludgy, but we're creating an empty vue component that's used momentarially
// while the router matches and figures out which component to show
var App = Vue.extend({})

// start the router
router.start(App, '#app')