add the FriendContact component

vue-cli-01-a-new-vue-project/src/App.vue

@@ -1,9 +1,15 @@
 <template>
     <h2>My Friends</h2>
+    <ul>
+        <friend-contact></friend-contact>
+        <friend-contact></friend-contact>
+    </ul>
 </template>
 
 <script>
+import FriendContact from "./components/FriendContact.vue";
 export default {
+    components: { FriendContact },
     data() {
         return {
             friends: [

vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

@@ -0,0 +1,31 @@
+<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>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            detailsAreVisible: false,
+            friend: {
+                id: "manuel",
+                name: "Manuel Lorenz",
+                phone: "01234 5678 991",
+                email: "manuel@localhost.com",
+            },
+        };
+    },
+    methods: {
+        toggleDetails() {
+            this.detailsAreVisible = !this.detailsAreVisible;
+        },
+    },
+};
+</script>

vue-cli-01-a-new-vue-project/src/main.js

@@ -1,4 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import FriendContact from "./components/FriendContact";
 
-createApp(App).mount("#app");
+const app = createApp(App);
+
+app.component("friend-contact", FriendContact);
+
+app.mount("#app");