整合一般npm套件 plugin

:::

14-7-2 整合現有的nuxt套件 plugin

14-7-4 將 localStorage 做成 plugin next

Vue.js 3.0 筆記

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

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

建立/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);

加到 nuxt.config.js 設定

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

將套件載入語法<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>

接著加入方法

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

加個按鈕以呼叫該方法

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

由於該套件的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;
}