src/components/GridItem.vue

@@ -12,7 +12,7 @@
 
         <hr />
 
-        <p class="price">{{ "$" + item.price }}</p>
+        <p class="price">${{ item.price | noDecimal }}</p>
       </section>
     </router-link>
   </article>
@@ -22,6 +22,11 @@
 export default {
   props: {
     item: Object
+  },
+  filters: {
+    noDecimal(value) {
+      return parseInt(value).toFixed();
+    }
   }
 };
 </script>

src/views/Fruit.vue

@@ -14,7 +14,7 @@
 
         <hr />
 
-        <p class="price">{{ "$" + fruit.price }}</p>
+        <p class="price">${{ fruit.price | noDecimal }}</p>
         <div class="alert">
           {{ "This offer " + expirationState }} {{ fruit.expires | moment("from", "now") }}
         </div>
@@ -33,6 +33,11 @@ export default {
       modalOpen: true
     };
   },
+  filters: {
+    noDecimal(value) {
+      return parseInt(value).toFixed();
+    }
+  },
   computed: {
     ...mapState(["fruit"]),
     expirationState() {
@@ -64,7 +69,7 @@ article {
   }
 
   section {
-    padding: 1.5rem 1rem;
+    padding: 1.5rem 2rem;
     background-color: @color-2;
 
     h3 {