Use API in frontend

You can use the endpoints with the help of the auto-imported composable useApiCaller(). This composable exposes a tRPC Nuxt Client.

Using a data loading composable

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().

index.vue

<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:

index.vue

<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>

Using the API caller directly

If you want to call your endpoints inside utils, composables, or anywhere else, use .query():

index.vue

<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>

Use API in frontend

Using a data loading composable

Using the API caller directly

On this page