useLazySanctumFetch

Besides useSanctumClient you can directly send a request by using a module-specific version of fetch composable - useLazySanctumFetch .

This composable implements a similar interface to useLazyFetch/useLazyAsyncData, so you can check more details here.

Composable accepts 3 arguments:

• endpoint URL to call

• SanctumFetchOptions to pass to the Sanctum client (ofetch)

• AsyncDataOptions to pass to useAsyncData under the hood

Keep in mind that some properties of FetchOptions are not available in SanctumFetchOptions due to misbehaviour on override by the user. You should set them only by using the module configuration or Nuxt hooks.

Unavailable properties:

• baseUrl

• credentials, redirect, retry

• onRequest, onRequestError

• onResponse, onResponseError

components/YourComponent.vue

const { data, status, error, refresh } = await useLazySanctumFetch('/api/users');

// or

const { data, status, error, refresh } = await useLazySanctumFetch(
  '/api/users',
  {
    method: 'GET',
    query: { page: 1 }
  },
  {
    default() { 
      return { 
        data: [], 
        meta: {
          total: 0, 
          per_page: 0 
        } 
      }
    }
  },
  'my-request-key',
);

You can also use type casting to work with the response as an interface:

interface MyResponse {
  name: string
}

const { data } = await useLazySanctumFetch<MyResponse>('/api/endpoint')

const name = data.value.name // augmented by MyResponse interface

Reactive parameters

You can use reactive values in query parameters the same way as in useSanctumFetch.