call api width axios

package.json

@@ -12,8 +12,11 @@
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.3.0",
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
+        "axios": "^0.26.0",
         "bootstrap": "^5.1.3",
         "vue": "^2.5.11",
+        "vue-alertify": "^1.1.0",
+        "vue-axios": "^3.4.1",
         "vue-router": "^3.0.1"
     },
     "browserslist": [
@@ -35,4 +38,4 @@
         "webpack": "^3.6.0",
         "webpack-dev-server": "^2.9.1"
     }
-}
+}
\ No newline at end of file

src/components/Task.vue

@@ -43,15 +43,38 @@
 </template>
 
 <script>
+import Vue from "vue";
+import VueAlertify from "vue-alertify";
+import axios from "axios";
+import VueAxios from "vue-axios";
+
+Vue.use(VueAxios, axios);
+Vue.use(VueAlertify);
+
 export default {
   data: function () {
     return {
       tasks: [],
+      api: [],
     };
   },
 
-  created: function () {
-    if (localStorage.getItem("tasks")) {
+  mounted: function () {
+    if (!localStorage.getItem("tasks")) {
+      this.axios.get("https://dog.ceo/api/breeds/list/all").then((response) => {
+        let ar = response.data.message.hound;
+        if (ar.length != 0) {
+          for (let i = 0; i < ar.length; i++) {
+            this.task = ar[i];
+            this.tasks.unshift({
+              name: this.task,
+              status: "to-do",
+            });
+          }
+          localStorage.setItem("tasks", JSON.stringify(this.tasks));
+        }
+      });
+    }else{
       this.tasks = JSON.parse(localStorage.getItem("tasks"));
     }
   },
@@ -61,6 +84,7 @@ export default {
       if (confirm("Are you sure you want to delete task?")) {
         this.tasks.splice(index, 1);
         localStorage.setItem("tasks", JSON.stringify(this.tasks));
+        this.$alertify.error("Delete task successfully");
       }
     },
   },

src/components/addTask.vue

@@ -27,6 +27,11 @@
 </template>
 
 <script>
+import Vue from 'vue';
+import VueAlertify from 'vue-alertify';
+ 
+Vue.use(VueAlertify);
+
 export default {
   data: function () {
     return {
@@ -54,6 +59,8 @@ export default {
       localStorage.setItem("tasks", JSON.stringify(this.tasks));
       this.task = null;
       this.$router.push("/");
+      this.$alertify.success('Add task successfully');
+
     },
   },
 };

src/components/editTask.vue

@@ -32,6 +32,11 @@
 </template>
 
 <script>
+import Vue from 'vue';
+import VueAlertify from 'vue-alertify';
+ 
+Vue.use(VueAlertify);
+
 export default {
   created: function () {
     if (localStorage.getItem("tasks")) {
@@ -64,6 +69,7 @@ export default {
       localStorage.setItem("tasks", JSON.stringify(this.tasks));
       this.task = null;
       this.$router.push("/");
+      this.$alertify.warning('Edit task successfully');
     },
   },
 };