[Vuejs]-Setting up Nuxt project with Axios module

by

0👍

You’re incorrectly using the return value of $axios.get() (i.e., a Response object):

// ❌ DON'T DO THIS: $axios.get() returns a Response,
// whose data prop contains actual response data
const ip = await $axios.get(...)
return { ip }

// ✅ OK
const { data: ip } = await $axios.get(...)
return { ip }

And it looks like you’re trying to use asyncData() in a component, but components don’t have asyncData(). You could either move asyncData() into a page (e.g., pages/index.vue); or use fetch() instead, which also works in a component. Don’t forget to declare ip in data():

// MyComponent.vue
export default {
  data() {
    return {
      ip: '',
    }
  },
  async fetch() {
    const { data } = await this.$axios.get('http://icanhazip.com')
    this.ip = data
  }
}

Leave a comment