---
# System prepended metadata

title: 整合現有個Nuxt Plugins
tags: [Mike課程]

---

---
tags:  Mike課程
---

# 整合現有個Nuxt Plugins
官網參考:https://nuxtjs.org/docs/directory-structure/plugins/
* npm安裝 axios套建
```
npm install @nuxtjs/axios
```
* nuxt,config,js / modules設定檔中加入

```javascript=
modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
```
* 如果要將axios另外寫一個錯誤的判定 可以在plugins下面新增一個axios,js檔案

> 裡面新增若API發生錯誤將會導入那個頁面

```javascript=
export default function ({ $axios, redirect }) {
    $axios.onError(error => {
      if (error.response.status === 500) {
        redirect('/sorry')
      }else if(error.response.status === 404){
        redirect('/404')  
      }
    })
  }
```

* nuxt.config.js中的plugins也要做設定引入全域變數

```javascript=
 plugins: [
    "~/plugins/axios.js"
  ],
```
* 那在要傳入的頁面就不用每頁再寫一次error訊息

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