add a NewFriend component

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

@@ -1,6 +1,7 @@
 <template>
     <div>
         <header><h1>My Friends</h1></header>
+        <new-friend></new-friend>
         <ul>
             <friend-contact
                 v-for="friend in friends"

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

@@ -0,0 +1,21 @@
+<template>
+    <form>
+        <div>
+            <label>Name: </label>
+            <input type="text" />
+        </div>
+        <div>
+            <label>Phone: </label>
+            <input type="tel" />
+        </div>
+        <div>
+            <label>Email: </label>
+            <input type="email" />
+        </div>
+        <div><button>Add Contact</button></div>
+    </form>
+</template>
+
+<script>
+export default {};
+</script>

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

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