Nuxt - Laravel Sanctum
GitHubNuxt Module
0.6
0.6
  • Getting Started
    • Introduction
    • Installation
  • Usage
    • Configuration
    • Cookie Authentication
    • Token Authentication
  • Composables
    • useSanctumAuth
    • useSanctumUser
    • useSanctumClient
    • useSanctumFetch
    • useLazySanctumFetch
    • useSanctumConfig
    • useSanctumAppConfig
  • Middleware
    • sanctum:auth
    • sanctum:guest
    • Global middleware
  • Hooks
    • sanctum:error
    • sanctum:error:request
    • sanctum:redirect
    • sanctum:init
    • sanctum:refresh
    • sanctum:login
    • sanctum:logout
  • Advanced
    • Interceptors
    • Error handling
    • Logging
    • Token storage
    • Plugin dependencies
    • Breeze Nuxt template
    • Troubleshooting
Powered by GitBook
On this page
Edit on GitHub
  1. Composables

useLazySanctumFetch

PrevioususeSanctumFetchNextuseSanctumConfig

Last updated 1 month ago

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, so you can check more details .

Composable accepts 3 arguments:

  • endpoint URL to call

  • FetchOptions to pass to the client (ofetch)

  • AsyncDataOptions to pass to useAsyncData under the hood

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 
        } 
      }
    }
  },
);

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

interface MyResponse {
  name: string
}

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

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