vue-notifications mini-toastr

notifications

1.js

@@ -1,31 +1,42 @@
-exports.hello = '18';
+// exports.hello = '18';
 
-// console.log(module);
-// console.log(process);
+// // console.log(module);
+// // console.log(process);
 
-const EventEmitter = require('events');
+// const EventEmitter = require('events');
 
-const myEmitter = new EventEmitter();
+// const myEmitter = new EventEmitter();
 
-myEmitter.once('newListener', (event, listener)=>{
-    console.log(event, listener);    
-    if(event == 'event') {
-        myEmitter.on('event', ()=>{
-            console.log("B");            
-        });
-    }
-});
+// myEmitter.once('newListener', (event, listener)=>{
+//     console.log(event, listener);    
+//     if(event == 'event') {
+//         myEmitter.on('event', ()=>{
+//             console.log("B");            
+//         });
+//     }
+// });
 
-myEmitter.on('event', ()=>{
-    console.log('A');    
-});
+// myEmitter.on('event', ()=>{
+//     console.log('A');    
+// });
 
-myEmitter.emit('event');
+// myEmitter.emit('event');
 
-console.log(EventEmitter.listenerCount(myEmitter, 'event'));
-myEmitter.setMaxListeners(12);
-console.log(myEmitter.getMaxListeners());
-console.log(myEmitter.eventNames());
+// console.log(EventEmitter.listenerCount(myEmitter, 'event'));
+// myEmitter.setMaxListeners(12);
+// console.log(myEmitter.getMaxListeners());
+// console.log(myEmitter.eventNames());
 
+var miniToastr = require('mini-toastr');
 
+const toastTypes = {
+    success: 'success',
+    error: 'error',
+    info: 'info',
+    warn: 'warn'
+};
+
+miniToastr.init({ types: toastTypes });
+
+miniToastr.success({ message: 11 })
 

nuxt.config.js

@@ -63,7 +63,10 @@ module.exports = {
     'normalize.css',
     '@/less/index.css'
   ],
-  plugins: ['~/plugins/axios.js'],
+  plugins: [
+    '~/plugins/axios.js',
+    { src: '~/plugins/vue-notifications.js', ssr: false }
+  ],
   // mode:'spa',
   generate: {
     dir: 'cdn',

package.json

@@ -34,9 +34,12 @@
     "jquery": "^3.2.1",
     "jsdom": "^11.11.0",
     "less-loader": "^4.1.0",
+    "mini-toastr": "^0.8.1",
     "node-less": "^1.0.0",
     "normalize.css": "^8.0.0",
     "request": "^2.87.0",
+    "vue": "^2.5.16",
+    "vue-notifications": "^0.9.0",
     "vuex": "^3.0.1",
     "xmlhttprequest": "^1.8.0"
   }

public/less/index.css

@@ -2,3 +2,6 @@ ul li {
   list-style: none;
   text-align: left;
 }
+.mini-toastr {
+  right: 50% !important;
+}

public/less/index.less

@@ -5,4 +5,7 @@ body{
 ul li{
     list-style: none;
     text-align: left;
+}
+.mini-toastr{
+    right: 50%;
 }

public/middleware/authenticated.js

@@ -1,6 +1,6 @@
 export default function ({ store, redirect }) {
     // console.log(store);
-    console.log(store.state);
+    // console.log(store.state);
     if (!store.state.authenticated) {
         // return redirect('/login');
     }

public/pages/index.vue

@@ -3,7 +3,9 @@
     <div>
       <div class="container">
         <div class="left">
-          <h2><nuxt-link to="/">Players</nuxt-link></h2>
+          <h2>
+            <nuxt-link to="/">Players</nuxt-link>
+          </h2>
           <ul class="players">
             <li v-for="user in users" :key="user.id">
               <nuxt-link :to="'/'+ user.id">{{user.name}}</nuxt-link>
@@ -18,7 +20,9 @@
       <br>
       <nuxt-link to="/secret">Go to secret</nuxt-link>
       <br>
-      <button @click="alertLog">{{$store.state.count}}</button>
+      <button @click="alertLog">notifications me</button>
+      <br> 
+      <button @click="showLoginError">{{$store.state.count}} notifications me</button>
       <div>{{content_two}}</div>
       <ul>
         <li v-for="(key, value) in content" :key="value">{{value}} : {{key}}</li>
@@ -33,16 +37,10 @@ import Loading from '~/components/loading.vue'
 import img from '@@/public/assets/tou.jpg'
 // import axios from '@/plugins/axios';
 import axios from 'axios';
-import { resolve } from 'url';
 import j1 from '@@/JSON_1.json';
-
 export default {
-  // fetch({store, params}){
-  //   return axios.get("http://my-api/stars").then(res => {
-  //     // store.commit('setStars', res.data);
-  //   });
-  // },
   data() {
+    console.log(this);
     return {
       title: img,
       content: null,
@@ -52,7 +50,20 @@ export default {
   },
   created() {
     
-    
+  },
+  notifications: {
+    showLoginInfo: {
+      title: 'Welcome!',
+      message: 'Hello from nuxt.js',
+      type: 'warn',
+      timeout: 1000000000,
+    },
+    showLoginError: {
+      title: 'Welcome!',
+      message: 'Hello from nuxt.js',
+      type: 'error',
+      timeout: 1000000000
+    }
   },
   components: {
     AppLogo,
@@ -104,6 +115,9 @@ export default {
 
   methods: {
     alertLog() {
+      this.showLoginInfo();
+      console.log(this);
+      
       this.$store.commit('increment')
     }
   }

public/pages/index/_id.vue

@@ -9,7 +9,7 @@
 <script>
 export default {
     validate({params, query, store}){
-        console.log(params, query, store);
+        // console.log(params, query, store);
         return !isNaN(params.id);
     },
     asyncData({ params, env }) {

public/plugins/vue-notifications.js

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import VueNotifications from 'vue-notifications';
+import miniToastr from 'mini-toastr';
+import warnIcon from '~/assets/apple_hover.png';
+
+const toastTypes = {
+    success: 'success',
+    error: 'error',
+    info: 'info',
+    warn: 'warn'
+};
+
+// This step requires only for mini-toastr, just an initialization
+miniToastr.init({
+    types: toastTypes,
+    // style: {
+        // 'mini-toastr':{
+        //     left:'50%'
+        // },
+        // 'mini-toastr__notification': {
+        //   'mini-toastr-notification__message': {
+        //       'border-radius': '5px',
+        //       'color': 'red'
+        //   }
+        // }
+    // }
+});
+miniToastr.setIcon('error', 'i', {'class': 'fa fa-warning'})
+miniToastr.setIcon('info', 'i', {'class': 'fa fa-info-circle'})
+miniToastr.setIcon('success', 'i', {'class': 'fa fa-check-circle-o'})
+miniToastr.setIcon('warn', 'img', {src: warnIcon, style: 'vertical-align: bottom;'})
+
+function toast({ title, message, type, timeout, cb }) {
+    return miniToastr[type](message, title, timeout, cb);
+}
+
+const options = {
+    success: toast,
+    error: toast,
+    info: toast,
+    warn: toast
+};
+
+Vue.use(VueNotifications, options);
+
+