How do I make API calls in Nuxt.js?

How do I make API calls in Nuxt.js?

You can make API calls in Nuxt.js using the asyncData method or the fetch hook. Which one would you like to know more about?

Can you explain the asyncData method?

Sure! The asyncData method is called before loading the component, allowing you to fetch data and return it as props. Here's a basic example:

export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('https://api.example.com/data');
    return { data };
  }
}

What about using the fetch hook?

The fetch hook is called after the component is created and can be used for fetching data. It doesn't return data as props but can set component data directly. Here's an example:

export default {
  data() {
    return { data: null };
  },
  async fetch() {
    this.data = await this.$axios.$get('https://api.example.com/data');
  }
}