Fetch Frog Nuxt

Nuxt specific implementation of fetch-frog.

Reactive fetching with SSR sync (Nuxt useFetch)

// src/composables/apiClients.ts
import { createUseFetchClient } from '@fetch-frog/nuxt';
import type { paths } from '~/types/api/v1'; // generated api types

export const reactiveApiClient = createUseFetchClient<paths>(
    'https://petstore3.swagger.io/api/v3',
    {}
);

// src/pages/index.vue
import { reactiveApiClient } from '~/composables/apiClient';

const { data } = await reactiveApiClient('/pet/{petId}', {
    path: {
        petId: 'frog'
    }
});

console.log(data.value);

Composable wrapper

Because of how Nuxt/Vue work, if you want to pass default values from a store or plugin for example, you will need to wrap the create function in a function that returns the create function. You wouldn't have access to other composables / stores such as useRuntimeConfig otherwise.

// src/composables/apiClients.ts

import { createUseFetchClient } from 'fetch-frog';
import type { paths } from '~/types/api/v1';

export function createApiClient() {
    const { user } = useNuxtApp().$auth;
    const baseUrl = `${useRuntimeConfig().public.apiUrl}/api/v1`;

    return createUseFetchClient<paths>(baseUrl, {
        onRequest: async ({ options }) => {
            options.headers = {
                ...options.headers,
                Authorization: `Bearer ${user.value?.accessToken}`
            };
        }
    });
}

// src/pages/index.vue

const apiClient = createApiClient();
const { data } = await apiClient('/pet/{petId}', {
    path: {
        petId: 'frog'
    }
});

Development

The package supports Nuxt 4.6.1 and up (^4.6.1). pnpm test:types type-checks the package against the Nuxt version in devDependencies via tsconfig.typecheck.json.

pnpm test runs both the type-check and the unit tests.