basic vue frontend complete

.env

@@ -0,0 +1 @@
+VUE_APP_API_URL=https://afternoon-escarpment-71350.herokuapp.com/api/contacts

package-lock.json

@@ -2591,6 +2591,14 @@
       "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5591,8 +5599,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -6450,6 +6457,11 @@
         }
       }
     },
+    "install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",

package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "install": "^0.13.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,19 +1,81 @@
+// HTML TEMPLATE
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <h1>Contacts</h1>
+  <ul>
+    <li 
+      v-for="contact in contacts" 
+      :key="contact.id"
+    >
+      {{contact.name}}, {{contact.age}} 
+
+      <button 
+        @click="deleteContact" 
+        :value="contact.id">
+        Delete
+      </button>
+
+      <details><summary>Edit</summary>
+        <ContactForm 
+          :contact-id="contact.id" 
+          :current-name="contact.name" 
+          :current-age="contact.age" @form-submitted="editContact"
+        />
+      </details>
+
+    </li>
+  </ul>
+  <h2>Add Contact</h2>
+  <ContactForm @form-submitted="createContact"/>
 </template>
 
+// VUE APP
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+// -- dependencies 
+import axios from 'axios'
+
+// -- components 
+import ContactForm from './components/ContactForm'
 
+// -- app config
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    ContactForm
+  },
+  data: function() {
+    return {
+      contacts: []
+    }
+  },
+  created: function() {
+    this.getContacts()
+  },
+  methods: {
+    getContacts: function() {
+      axios.get(process.env.VUE_APP_API_URL).then(res => {
+        this.contacts = res.data
+      })
+    },
+    deleteContact: function(e) {
+      axios.delete(`${process.env.VUE_APP_API_URL}/${e.target.value}`).then(() => {
+        this.getContacts()
+      });
+    },
+    createContact: function(contactInfo) {
+      axios.post(process.env.VUE_APP_API_URL, contactInfo).then(res => {
+        this.contacts.push(res.data)
+      })
+    }, 
+    editContact: function(updateInfo) {
+      axios.put(`${process.env.VUE_APP_API_URL}/${updateInfo.id}`, updateInfo).then(() => {
+        this.getContacts()
+      })
+    }
   }
 }
 </script>
 
+//  CSS (GLOBAL)
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/ContactForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <form @submit.prevent="handleSubmit">
+    <input type="text" placeholder="name" v-model="name"/>
+    <input type="number" placeholder="age" v-model="age"/>
+    <input type="submit"/>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'ContactForm',
+  data: function() {
+    return {
+      name: '',
+      age: 0,
+      id: null
+    }
+  },
+  props: {
+    'currentName': String,
+    'currentAge': Number,
+    'contactId': Number
+  },
+  created: function() {
+    // if there's a currentName prop sent done, prefill the values
+    if(this.currentName) {
+      this.name = this.currentName
+      this.age = this.currentAge
+      this.id = this.contactId
+    }
+  },
+  methods: {
+    handleSubmit: function() {
+        this.$emit('form-submitted', {
+          name: this.name,
+          age: parseInt(this.age),
+          id: this.id
+        })
+    }
+  }
+}
+</script>
+
+//  CSS (SCOPED)
+// -- meaning it only applies to this component
+<style scoped>
+  input {
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    chainWebpack: config => {
+        config
+            .plugin('html')
+            .tap(args => {
+                args[0].title = "Contacts";
+                return args;
+            })
+    }
+}