move the contact template to the component

cmp-intro-01-starting-setup/app.js

@@ -23,9 +23,25 @@ const app = Vue.createApp({
 
 // use multiword component names
 app.component("user-contact", {
+    template: `
+            <li>
+                <h2>{{ friend.name }}</h2>
+                <button @click="toggleDetails()">Show Details</button>
+                <ul v-if="detailsAreVisible">
+                    <li><strong>Phone:</strong> {{ friend.phone }}</li>
+                    <li><strong>Email:</strong> {{ friend.email }}</li>
+                </ul>
+            </li>
+    `,
     data() {
         return {
             detailsAreVisible: false,
+            friend: {
+                id: "manuel",
+                name: "Manuel Lorenz",
+                phone: "01234 5678 991",
+                email: "manuel@localhost.com",
+            },
         };
     },
     methods: {

cmp-intro-01-starting-setup/index.html

@@ -17,14 +17,7 @@
     </header>
     <section id="app">
         <ul>
-            <li v-for="friend in friends">
-                <h2>{{ friend.name }}</h2>
-                <button @click="toggleDetails()">Show Details</button>
-                <ul v-if="detailsAreVisible">
-                    <li><strong>Phone:</strong> {{ friend.phone }}</li>
-                    <li><strong>Email:</strong> {{ friend.email }}</li>
-                </ul>
-            </li>
+            <user-contact></user-contact>
         </ul>
     </section>
 </body>