---
# System prepended metadata

title: 第三方套件整合 到Nuxt
tags: [Mike課程]

---

---
tags:  Mike課程
---

# 第三方套件整合 到Nuxt
參考套件 : https://github.com/euvl/vue-notification#readme

<div class="alert alert-danger text-content role="alert">
套件載入 要注意有無支援SSR
</div>

> 安裝套件
```
npm install --save vue-notification
```
* 在plugins建立一個套件的資料檔案並複製套件code
```javascript=
import Vue           from 'vue'
import Notifications from 'vue-notification'

/*
or for SSR:
import Notifications from 'vue-notification/dist/ssr.js'
*/

Vue.use(Notifications)

```
* 在全域設置nuxt.config.js 下設置css跟plugins套件
```
css: [
    "~/assets/notifications.css"
  ],
  
   plugins: [
    "~/plugins/notification.js"
  ],
```
* 使用methods函式 綁定button上面，加入套件的方式內容

```javascript=
 methods: {
    getClick() {
      this.$notify({
        group: "foo",
        title: "Important message",
        text: "Hello user!",
      });
    },
  },
```
* 在預設要出現的位置 例如:default.vue，group是套件要相互響應的連動
```
 <notifications group="foo" />
```