Merge pull request #10 from danvincent11/master

feat: toast notification

Author: kabaluyot

nuxt.config.js

@@ -82,6 +82,7 @@ export default {
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
+    'vue-toastification/nuxt',
   ],
   /**
    * Public runtime configs
@@ -105,6 +106,23 @@ export default {
       },
     },
   },
+  toast: {
+    transition: 'Vue-Toastification__fade',
+    maxToasts: 20,
+    newestOnTop: true,
+    position: 'bottom-left',
+    timeout: 5000,
+    closeOnClick: true,
+    pauseOnFocusLoss: true,
+    pauseOnHover: true,
+    draggable: false,
+    draggablePercent: 0.6,
+    showCloseButtonOnHover: true,
+    hideProgressBar: true,
+    closeButton: 'button',
+    icon: true,
+    rtl: false,
+  },
   /**
    *  PWA module configuration
    *  https://pwa.nuxtjs.org/setup.html

package-lock.json

@@ -32,7 +32,8 @@
     "babel-core": "^7.0.0-bridge.0",
     "nuxt": "^2.15.4",
     "nuxt-property-decorator": "^2.7.2",
-    "regenerator-runtime": "^0.13.7"
+    "regenerator-runtime": "^0.13.7",
+    "vue-toastification": "^1.7.14"
   },
   "devDependencies": {
     "@nuxt/types": "^2.13.0",

package.json

@@ -96,6 +96,9 @@ export default class Index extends Vue {
 
     // print values using runtime config
     console.log('APP_NAME', this.$config.appName)
+
+    // Toast notification
+    this.$toast.info('Hello')
   }
 }
 </script>

pages/index.vue

@@ -15,7 +15,13 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@types/node", "@nuxt/types", "@nuxtjs/axios", "jest"]
+    "types": [
+      "@types/node",
+      "@nuxt/types",
+      "@nuxtjs/axios",
+      "jest",
+      "vue-toastification/nuxt"
+    ]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }

tsconfig.json

@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    type Element = VNode
+    type ElementClass = Vue
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}