---
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

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上面，加入套件的方式內容

 methods: {
    getClick() {
      this.$notify({
        group: "foo",
        title: "Important message",
        text: "Hello user!",
      });
    },
  },

* 在預設要出現的位置 例如:default.vue，group是套件要相互響應的連動

 <notifications group="foo" />