How to call APIs after the page is loaded?

[mhabbasi-gh]

I understand that I can call APIs using asyncData and fetch but they are loaded on server side. So I was wondering how can I call my APIs after the page is loaded using an event listener like pressing a button or scrolling?

[hazer-hazer]

Read docs about life-cycle to choose the method from step at what you want something to happen: https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

But, as you asked you can fetch data using asyncData or fetch (I'd advise to use fetch). If you want fetch to be called only on client-side, you can specify fetchOnServer: false in component/page root object, or you can check for process.client, like that:

fetch() {
    if (process.client) // ... do client-only stuff
}

[mhabbasi-gh]

Thanks. But what if let's say I fetch two APIs (API1 and API2) from server on fetch but then I want to fetch a third API API3 when clicking on a button. Can I do it using methods something like:

//template
<button @click="thirdApi"> API </button>
//script
Methods:{
  thirdApi(){
    //calling the API here  
  }
}

or do I add the third api to fetch hook as well? If then how do I call only the third api when clicking on the button?