Nuxt.js provides powerful tools for server-side rendered applications, with useFetch being a key composable for efficient API data retrieval. This function combines useAsyncData and $fetch, automatically generating keys, providing URL type hints, and inferring response types.

Basic Implementation

Fetching data from an API endpoint:

<template>
  <div>
    <div v-if="loading">Loading content...</div>
    <div v-else-if="fetchError">{{ fetchError }}</div>
    <div v-else>
      <ul>
        <li v-for="item in responseData" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
const { data: responseData, pending: loading, error: fetchError } = 
  useFetch('https://api.service.com/resources');
</script>

Dynamic Parameter Handling

Passing URL parameters:

const searchTerm = ref('');
const { data } = useFetch('/api/search', {
  query: { q: searchTerm, limit: 20 }
});

Request Interceptors

Modifying requests and responses:

const { data } = useFetch('/auth', {
  onRequest({ options }) {
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${localStorage.token}`
    };
  },
  onResponse({ response }) {
    if (response.data.accessToken) {
      localStorage.setItem('token', response.data.accessToken);
    }
  }
});

Configuration Options

Key parameters for useFetch:

• url: API endpoint (string)
• options: Configuration object including:
  • method: HTTP method (GET/POST/PUT/DELETE)
  • query: URL parameters
  • headers: Request headers
  • body: Request payload
  • baseURL: Root API URL

useAsyncData Integration

When using useAsyncData directly:

const { data } = useAsyncData('unique-key', async () => {
  return await $fetch('/api/data');
}, {
  lazy: true,
  server: false,
  transform: (rawData) => rawData.results
});