added modal when deleteing

Author: shoaibsharif

README.md

@@ -4,6 +4,16 @@ Browse and create mini step-by-step tutorial
 
 [snippet.shoaibsharif.dev](https://snippet.shoaibsharif.dev)
 
+## Features
+
+- Algolia search Integration with Vue InstantSearch
+- Nuxt.js with Laravel API integration with TailwindCSS
+- change editor mode based on extension (i.e. `*.js`, `*.ts`, `*.vue`)
+- change highlight mode based on extension
+- Search Animation using [`anime.js`](https://animejs.com/)
+- Customized TailwindCSS Modal using Promise
+- TailwindCSS dark Mode 🌓
+
 ## Build Setup
 
 ```bash

components/Snippet/List.vue

@@ -40,19 +40,25 @@
 </template>
 
 <script>
+import modal from "@/mixins/modal";
+
 export default {
   props: {
     snippets: {
       required: true
     },
     showPublic: Boolean
   },
+  mixins: [modal],
   methods: {
     visibilityChanged(isVisible) {
       if (!isVisible) return
       this.$emit('onVisible', "just updated")
     },
+
     async deleteSnippet(snippet) {
+      const confirm = await this.openModal()
+      if (!confirm) return
       await this.$axios.$delete(`/api/snippets/${snippet.id}`);
       this.snippets = this.snippets.filter(s => s.id !== snippet.id);
     }

mixins/modal.js

@@ -0,0 +1,19 @@
+import Vue from "vue";
+import Modal from "~/components/Modal";
+
+export default {
+  methods: {
+    openModal() {
+      return new Promise((resolve, reject) => {
+        const mboxInstance = Vue.extend(Modal)
+        const modalComponent = new mboxInstance().$mount()
+        document.getElementById('__nuxt').appendChild(modalComponent.$el);
+        modalComponent.$data.openModal = true
+        modalComponent.$on('confirm', result => {
+          return resolve(result)
+        })
+
+      })
+    },
+  }
+}

nuxt.config.js

@@ -37,7 +37,7 @@ export default {
       },
       {
         rel: "stylesheet",
-        href: "https://fonts.googleapis.com/css2?family=Nunito&display=swap"
+        href: "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap"
       }
     ]
   },

pages/snippets/_id/edit.vue

@@ -99,7 +99,7 @@ import Vue from "vue";
 import browseSnippet from "~/mixins/snippets/browseSnippet";
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import pagetransition from "@/mixins/pagetransition";
-import Modal from '@/components/Modal.vue'
+import modal from "@/mixins/modal";
 
 export default Vue.extend({
 
@@ -158,7 +158,7 @@ export default Vue.extend({
       }, 1000)
     },
   },
-  mixins: [browseSnippet, pagetransition],
+  mixins: [browseSnippet, pagetransition, modal],
   async asyncData(ctx) {
     try {
       const snippet = await ctx.app.$axios.$get(`/api/snippets/${ctx.params.id}`)
@@ -202,18 +202,7 @@ export default Vue.extend({
       this.steps = this.steps.filter(s => s.id !== step.id);
       await this.$router.push({query: {step: previousStep?.id || this.steps[0].id}});
     },
-    openModal() {
-      return new Promise((resolve, reject) => {
-        let mboxInstance = Vue.extend(Modal)
-        let oComponent = new mboxInstance().$mount()
-        document.getElementById('__nuxt').appendChild(oComponent.$el);
-        oComponent.$data.openModal = true
-        oComponent.$on('confirm', result => {
-          return resolve(result)
-        })
-
-      })
-    },
+
     stepWatcher() {
       return debounce(async function (step) {
         let {title, body, id} = step