Nuxt.jsでAxiosを使ってみる

2020/12/19

#Vue.js/Nuxt.js

Nuxt.jsでAxiosを使う方法をメモ

インストール


npm install @nuxtjs/axios --save


nuxt.config.js

modules: [
    "@nuxtjs/axios",
],


nuxt.config.jsのmodulesに@nuxtjs/axiosを追加することで使えるようになります。

axiosを使う


index.vue

methods:{
    test:function(){
        this.$axios.$get(url)
        .then(function(responce){
            console.log(responce)
        })
        .catch(function(error){
            console.log(error)
        })
    }
}


上のコードでtestを発火させるとレスポンスの内容がコンソールに出力されます。

エラーが発生した場合はcatchの中の関数のerrorに発生したエラーが入ります。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js