14-7-3 整合一般npm套件 plugin

1. 先安裝此套件 https://www.npmjs.com/package/vue-notification （要有支援SSR的套件才不會有問題）

   npm install --save vue-notification

2. 建立/plugins/notification.js

   import Vue from "vue";
   // for SPA:
   // import Notifications from 'vue-notification'
   // for SSR:
   import Notifications from "vue-notification/dist/ssr.js";
   
   Vue.use(Notifications);
   

    

3. 加到 nuxt.config.js 設定

   plugins: ["~/plugins/hello.js", "~/plugins/axios.js","~/plugins/notification.js"],

    

4. 將套件載入語法<notifications group="foo" />加到每頁都會執行到的地方，如：layouts\default.vue

   <template>
     <div>
       <Nav />
       <!-- 主畫面 -->
       <div class="container">
         <div class="row">
           <!-- 主內容區 -->
           <div class="col-md-9">
             <Nuxt />
             <notifications group="foo" />
           </div>
           <!-- 側邊欄 -->
           <div class="col-md-3">
             <Aside />
           </div>
         </div>
       </div>
   
     </div>
   </template>
   

    

5. 接著加入方法

     methods: {
       handNotify() {
         this.$notify({
           group: "foo",
           title: "Important message",
           text: "Hello user! This is a notification!",
         });
       }
     },

    

6. 加個按鈕以呼叫該方法

   <template>
     <div>
       <h1>關於</h1>
       <button @click="handNotify">按我</button>
     </div>
   </template>

    

7. 由於該套件的CSS是放在src/Notifications.vue中，無法被plugin讀取，所以，從中取出CSS，並另存至assets\notification.css

   
   .vue-notification-group {
     display: block;
     position: fixed;
     z-index: 5000;
   }
   .vue-notification-wrapper {
     display: block;
     overflow: hidden;
     width: 100%;
     margin: 0;
     padding: 0;
   }
   .notification-title {
     font-weight: 600;
   }
   .vue-notification-template {
     display: block;
     box-sizing: border-box;
     background: white;
     text-align: left;
   }
   .vue-notification {
     display: block;
     box-sizing: border-box;
     text-align: left;
     font-size: 12px;
     padding: 10px;
     margin: 0 5px 5px;
     color: white;
     background: #44A4FC;
     border-left: 5px solid #187FE7;
   }
   .vue-notification.warn {
     background: #ffb648;
     border-left-color: #f48a06;
   }
   .vue-notification.error {
     background: #E54D42;
     border-left-color: #B82E24;
   }
   .vue-notification.success {
     background: #68CD86;
     border-left-color: #42A85F;
   }
   .vn-fade-enter-active, .vn-fade-leave-active, .vn-fade-move  {
     transition: all .5s;
   }
   .vn-fade-enter, .vn-fade-leave-to {
     opacity: 0;
   }
   

    

8. 接著在nuxt.config.js中加入CSS設定

   css: ['~/assets/notification.css'],

    

9.