背景

Nuxt.jsで動いているSPAアプリをVue.jsに解体してほしい的な話があり、部分部分をTipsとして投稿します。
APIはLaravel(6.x)です。なおLaravelとNuxt.jsは同一リポジトリです(なぜ)
Nuxt.jsは2.9。Vueは2.6.10
今回はAxios編です。

Vue.jsでthis.$axiosを使えるようにPluginを作る

resources/js/plugin/axios.js

import axios from "axios"

const AxiosPlugin = {}

AxiosPlugin.install = function (Vue) {
  Vue.prototype.$axios = axios;
}
export default AxiosPlugin;

あとはPluginを読み込むだけで、this.$axiosが使えます。

resources/js/app.js

import Vue from "vue";
import router from '~/router'
import App from '~/App.vue'
import AxiosPlugin from '~/plugin/axios';

Vue.use(AuthPlugin)

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

Nuxt.jsでのonRequestやonErrorを使いたい場合

Nuxt.js Axios ModuleのonRequestやonErrorを使いたい時があると思います。

その時はinterceptorsを使います。

resources/js/plugin/axios.js

import axios from "axios"

const AxiosPlugin = {}

AxiosPlugin.install = function (Vue) {
  Vue.prototype.$axios = axios;

  Vue.prototype.$axios.interceptors.response.use(
    function (response) {
      console.info(response)
      return response;
    },
    function (error) {
      console.error(error)
      return Promise.reject(error);
    }
}
export default AxiosPlugin;

参考

##関連リンク