如何在 Nuxt 使用 Plugins

我們常常會使用到套件，幫助網站快速達到想要的效果，在 NUXT 要怎麼自行撰寫套件、如何整合現有的套件、或是整合第三方套件呢?

自己撰寫的 Plugins

自己撰寫 Plugins 起手式

export default ({ app }, inject) => {
  inject('EventName', {
    // 想做的事情
  });
};

inject 會把你所寫的東西，注入到整個環境，
EventName 是自定義的方法名稱，可以在頁面呼叫this.$EventName使用。

1.在 plugins 資料夾新增自定義的 js

/plugins/demo.js

export default ({ app }, inject) => {
  inject('EventName', {
    log(val) {
      console.log('EventName=>', val);
    },
  });
};

2.載入 demo.js

nuxt.config.js

plugins: ['~/plugins/demo.js'];

3.調用自定義的方法

index.vue

// SSR 沒有 this，直接調用 $EventName
asyncData(context) {
  context.$EventName.log("asyncData");
},

// CSR 沒有 this，直接調用 $EventName
mounted() {
  console.log(this.$EventName.log("mounted"));
},

整合現有的 Nuxt Plugins

以 axios 做為範例

1.安裝 nuxt axios

npm install @nuxtjs/axios

2.設定 modules

nuxt.config.js

modules: ["@nuxtjs/axios"],

設定 modules 後，就可以用 context.$axios 去做操作了，
也可使用解構的方式

async asyncData({ $axios }) {
  const res = await $axios.get(
    "https://vue-lessons-api.herokuapp.com/photo/list"
  );
  console.log(res.data);
},

3.封裝 axios 的錯誤處理

在 plugins 新增 axios.js，用來處理 onError

plugins/axios.js

export default function ({ $axios, redirect }) {
  $axios.onError((error) => {
    //axios 如發生錯誤，onError 可依內容去做後續處理
    if (error.response.status === 500) {
      redirect('/sorry'); // 跳轉頁面
    }
    if (error.response.status === 404) {
      redirect('/404');
    }
  });
}

並在 nuxt.config.js 新增 plugins

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

這麼一來整個 global 都可以使用到這個 axios 的錯誤處理

第三方套件整合 Nuxt

通常使用 Nuxt 製作時，會找可以直接在 Nuxt 使用的套件，如果想使用的套件不是 Nuxt 專用，我們需要將一般的 VUE 套件，包裝成 NUXT 再做使用，需注意套件有沒有支援 SSR

以 Vue.js notifications 套件做為範例，是一個彈出通知訊息的套件

1.安裝 notifications

npm install --save vue-notification

先將 notifications 安裝起來

2.新增 notifications.js 並引用

在 plugins 新增 notification.js
notification.js

import Vue from 'vue';
// import Notifications from 'vue-notification' 此為 CSR 使用
import Notifications from 'vue-notification/dist/ssr.js';

Vue.use(Notifications);

本來在 CSR 時是放在 main.js 的引入，NUXT 是放在 notification.js，使用 SSR 的方式引入

在 nuxt.config.js 新增 plugins

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

3.使用套件方法

由於此套件屬於全站皆可使用的，所以放在 layouts，訊息 position 可以依需求調整

layouts/default.vue

<notifications position="bottom right" />

pages/index.vue

<button @click="showNotice">CLICK</button>

methods: {
  showNotice() {
    // using options
    this.$notify({
      title: "Important message",
      text: "Hello user!",
    });
  },
},

4.匯入 CSS

NUXT 套件整合，可能會遇到吃不到 CSS 的情況，需自行匯入 CSS
在 assets 新增 notifications.css，並全域匯入

nuxt.config.js

css: ['~/assets/notifications.css'];

---

筆記來源: 2021 Vue3 專業職人 | 進階篇

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。