added food view, just need to improve food lookup, then UI stuff

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "vue": "^2.5.2",
+    "vue-resource": "^1.3.5",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/App.vue

@@ -1,16 +1,12 @@
 <template>
   <div id="app">
-    <SearchForm></SearchForm>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import SearchForm from './components/search'
 export default {
-  name: 'App',
-  components: {
-    SearchForm
-  }
+  name: 'App'
 }
 </script>
 

src/components/Food.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="food">
+		<h1>{{header}}</h1>
+		<p>{{rank}}</p>
+		<p>{{category}}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Food',
+	data () {
+		return {
+			header:"Food Name",
+			rank:"",
+			category:"",
+			foodInfo: {}
+		}
+	},
+
+	created () {
+	    this.getFoodInfo()
+	  },
+		
+	methods:{
+
+	  	getFoodInfo: function() {
+			this.$http.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/038000311307').then((response) =>  {
+			        	if(response.ok) {
+			        		return response.body
+			        	}
+			        }).then(function(results) {
+			        	if(results.id === null) {
+			        		this.$router.replace({name: '404'})
+			        	} else {
+			        		this.header = results.data.name
+			        		this.rank = results.data.rank.name
+			        		this.category = results.data.category.name
+			        	}
+			        })
+		}
+    }
+	
+}
+</script> 
+
+<style scoped>
+
+
+
+</style>

src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="searhform">
+	<div class="searchform">
 		<h1>{{header}}</h1>
 		<fieldset>
 			<p><label for="upc">UPC</label> <input type="text" id="upc"></p>

src/main.js

@@ -1,6 +1,10 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import vueResource from 'vue-resource'
+Vue.use(vueResource);
+
+
 import App from './App'
 import router from './router'
 

src/router/index.js

@@ -1,13 +1,23 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-
+import SearchForm from '@/components/Search'
+import Food from '@/components/Food'
+var VueResource = require('vue-resource');
+Vue.use(VueResource);
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: '/'
-    }
+      path: '/',
+      name: 'SearchPage',
+      component: SearchForm
+    },
+     {
+      path: '/Food',
+      name: 'Food',
+      component: Food
+    }   
   ]
 })