customer list cards view

src/App.vue

@@ -69,8 +69,10 @@
   @import '~bulma/sass/base/_all'
   @import '~bulma/sass/layout/section'
   @import '~bulma/sass/components/nav'
+  @import '~bulma/sass/components/card'
   @import '~bulma/sass/elements/button'
   @import '~bulma/sass/elements/other'
+  @import '~bulma/sass/grid/columns'
 
   @import '~font-awesome/css/font-awesome.css';
 </style>

src/components/CustomerCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="card">
+    <header class="card-header">
+      <p class="card-header-title">
+        {{ this.name }}
+      </p>
+    </header>
+    <div class="card-content">
+      <div class="content">
+        <div>XX orders</div>
+        <div><a href="" target="_blank">{{ customer.email }}</a></div>
+        <small>{{ customer.city }}, {{ customer.state }}</small>
+      </div>
+    </div>
+    <footer class="card-footer">
+      <a class="card-footer-item">Save</a>
+      <a class="card-footer-item">Edit</a>
+      <a class="card-footer-item">Delete</a>
+    </footer>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CustomerCard',
+    props: {
+      customer: {
+        type: Object,
+        required: true,
+        validator(value) {
+          const props = [
+            'firstname',
+            'lastname',
+            'city',
+            'state',
+            'email',
+          ];
+
+          return props.every(prop => !!value[prop]);
+        }
+      }
+    },
+    computed: {
+      name() {
+        console.og
+        return `${this.customer.firstname} ${this.customer.lastname}`;
+      },
+    },
+  }
+</script>

src/containers/Customers.vue

@@ -1,15 +1,44 @@
 <template>
   <section class="section">
     <div class="container">
-      <div class="notification">
-        Customer list will go here
+      <h1>Customers</h1>
+
+      <div class="columns is-multiline">
+        <div class="column is-one-third" v-for="customer in customers">
+          <CustomerCard :customer="customer">
+        </div>
       </div>
+
     </div>
   </section>
 </template>
 
 <script>
-  export default {
+  import CustomerCard from '../components/CustomerCard.vue';
 
+  export default {
+    name: 'Customer',
+    components: {
+      CustomerCard
+    },
+    data() {
+      const mockCustomer = (num) => ({
+        firstname: 'John',
+        lastname: `Doe${num}`,
+        city: 'cityton',
+        state: 'AZ',
+        email: 'john@email.com',
+      });
+
+      return {
+        customers: [
+          mockCustomer(1),
+          mockCustomer(2),
+          mockCustomer(3),
+          mockCustomer(4),
+          mockCustomer(5),
+        ],
+      }
+    },
   }
 </script>