use custom elements compliant component names

src/components/CustomerCard.vue

@@ -22,7 +22,7 @@
 
 <script>
   export default {
-    name: 'CustomerCard',
+    name: 'customer-card',
     props: {
       customer: {
         type: Object,

src/components/TopNav.vue

@@ -13,7 +13,7 @@
 
 <script>
   export default {
-    name: 'TopNav',
+    name: 'top-nav',
     props: {
       title: String,
     }

src/pages/About.vue

@@ -10,6 +10,6 @@
 
 <script>
   export default {
-    name: 'AboutPage',
+    name: 'about-page',
   }
 </script>

src/pages/Customers.vue

@@ -17,7 +17,7 @@
   import CustomerCard from '../components/CustomerCard.vue';
 
   export default {
-    name: 'CustomerPage',
+    name: 'customer-page',
     components: {
       CustomerCard,
     },

src/pages/Login.vue

@@ -26,7 +26,7 @@
   import TopNav from '../components/TopNav.vue';
 
   export default {
-    name: 'LoginPage',
+    name: 'login-page',
     components: {
       TopNav,
     },

src/pages/Orders.vue

@@ -10,6 +10,6 @@
 
 <script>
   export default {
-    name: 'OrdersPage',
+    name: 'orders-page',
   }
 </script>