If you want to have features like caching, pending, errors, etc., you can use the .useQuery() or .useLazyQuery() methods, which are built on top of Nuxt useAsyncData.
This only works inside <script setup>. If you want to call your endpoints inside utils, composables, or anywhere else,
use .query().
<script setup lang="ts"> const { apiCaller } = useApiCaller(); const { data: plans } = await apiCaller.billing.plans.useQuery();</script><template> <!-- do something with the data... --> <div>{{ plans }}</div></template>
If you want to load the data lazily (meaning that you will have to handle the loading state), you can do that like so:
<script setup lang="ts"> const { apiCaller } = useApiCaller(); const { data: plans, pending } = apiCaller.billing.plans.useLazyQuery();</script><template> <div v-if="pending">Loading...</div> <!-- do something with the data... --> <div v-else>{{ plans }}</div></template>
If you want to call your endpoints inside utils, composables, or anywhere else, use .query():
<script setup lang="ts"> const { apiCaller } = useApiCaller(); // This could be a util or composable in another file. const getPlans = async () => { // Other stuff... return await apiCaller.billing.plans.query(); }; onMounted(async () => { const plans = await getPlans(); // do something with the data... console.log({ plans }); });</script><template> <div /></template>