@nuxt-alt/http v1.7.10

Information

This serves as an extension to ohmyfetch for nuxt. This works similar to nuxt/http and nuxtjs-alt/axios except it utilizes ohmyfetch. All property options will be under http. This module is required in order for @nuxt-alt/auth to function.

Setup

1. Add @nuxt-alt/http dependency to your project

yarn add @nuxt-alt/http

2. Add @nuxt-alt/http to the modules section of nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxt-alt/http'
    ],
    http: {
        /* module options */
    }
});

Example

Remember this is a mix of ofetch and nuxt/http so to use methods you would use as an example:

// Available methods: 'get', 'head', 'delete', 'post', 'put', 'patch', 'options'

// $http.$get('/api', options) and $http.$get({ url: '/api' }) is the same as $fetch('/api', { method: 'get' })
await $http.$get('/api', options)
await $http.$get({ url: '/api', ...options })

// Access Raw Response
// $http.get('/api', options) and $http.get({ url: '/api' }) is the same as $fetch.raw('/api', { method: 'get' })
await $http.get('/api', options)
await $http.get({ url: '/api', ...options })

// $http.request('/api', options) and $http.request({ url: '/api' }) is the same as $fetch('/api', options)
await $http.request({ url: '/api', ...options })
await $http.request('/api', options)

// Access Raw Response
// $http.raw('/api', options) and $http.raw({ url: '/api' }) is the same as $fetch.raw('/api', options)
await $http.raw({ url: '/api', ...options })
await $http.raw('/api', options)

// Access Fetch Native Response
// $http.natvie('/api', options) and $http.native({ url: '/api' }) is the same as $fetch.native('/api', options) or fetch('/api', options)
await $http.native({ url: '/api', ...options })
await $http.native('/api', options)

Composable

A useHttp composable is avaialble, it works like useFetch except uses this module under the hood.

Interceptors

The interceptors should work exactly like how axios has it so to access them you would use:

$http.interceptors.request.use(config)
$http.interceptors.response.use(response)

@nuxtjs-axios based functions have also been added:

$http.onRequest(config)
$http.onResponse(response)
$http.onRequestError(err)
$http.onResponseError(err)
$http.onError(err)

You can also opt to use $fetch interceptors if you prefer:

// non-composable
await $http.$get('/api', {
    async onRequest({ request, options }) {
        // Log request
        console.log("[fetch request]", request, options);

        // Add `?t=1640125211170` to query search params
        options.query = options.query || {};
        options.query.t = new Date();
    },
})

// composable
await useHttp('/api', {
    async onRequest({ request, options }) {
        // Log request
        console.log("[fetch request]", request, options);

        // Add `?t=1640125211170` to query search params
        options.query = options.query || {};
        options.query.t = new Date();
    },
})

Options

Config options are taken from the http module, with minor adjustments.

interface ModuleOptions extends Omit<FetchConfig, 'credentials'> {
    baseURL?: string;
    browserBaseURL?: string;
    host?: string;
    prefix?: string;
    port?: string | number;
    https?: boolean;
    proxyHeaders?: boolean;
    proxyHeadersIgnore?: string[];
    serverTimeout?: number,
    clientTimeout?: number,
    retry?: number;
    credentials?: 'same-origin' | 'omit' | 'include';
    headers?: HeadersInit;
    debug?: boolean;
}