nuxtjs-axios-issue.markdown

Here's my index.vue file:

<template>
  <section>
    <p>Text</p>
  </section>
</template>

<script>
// import { axios } from '@nuxtjs/axios'    // way #1
// import axios from '@nuxtjs/axios'        // way #2

// HOW TO IMPORT AND USE axios?

export default {
  mounted() {
    axios
      .get('https://dog.ceo/api/breeds/list')
      .then(function(res) {
        console.log(res)
      })
      .catch(function(err) {
        console.log('Error: ', err)
      })
  }
}

</script>

Errors I face in when importing as way #1:

TypeError: Cannot read property 'get' of undefined
    at VueComponent.mounted (index.vue?6ced:22)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6494)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)

Errors I'm facing when using way #2:

TypeError: _nuxtjs_axios__WEBPACK_IMPORTED_MODULE_4___default.a.get is not a function
    at VueComponent.mounted (index.vue?6ced:22)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6494)
    at Vue._update (vue.runtime.esm.js?2b0e:3945)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)

Please comment if anything more needs to be done to set this up.

Thanks!

Add it into your nuxt.config.js file:

modules: [
    '@nuxtjs/axios',
  ]

Now, you can access Axios from anywhere in your application by calling this.$axios.get()