useAccApi

Exposes the $accApi Nuxt plugin as a small convenience composable.

Overview

useAccApi() is a thin wrapper around the $accApi plugin, which handles reCAPTCHA injection, auth error handling, and concurrency limiting. This composable just saves you from writing useNuxtApp().$accApi every time.


  • Use useAccApi() inside components, pages, composables, and Pinia stores.
  • Use useNuxtApp().$accApi outside normal composition usage.

Usage

// In <script setup> — preferred
const data = await useAccApi<MyType>('/your-endpoint', { method: 'GET' })

// With reCAPTCHA — pass captchaAction, the plugin handles the rest
const result = await useAccApi('/your-endpoint', {
  method: 'POST',
  body: { captchaAction: 'submit_form', ...payload },
})

With useAsyncData

// SSR-safe — data is fetched on server and hydrated on client
const { data, pending, error } = await useAsyncData('my-key', () =>
  useAccApi<MyType>('/your-endpoint', { method: 'GET' })
)

// With a POST body — useful for search or filter requests
const { data: result } = await useAsyncData('submit', () =>
  useAccApi('/your-endpoint', {
    method: 'POST',
    body: { captchaAction: 'submit_form', ...payload },
  })
)

Parameters

request:NitroFetchRequest
The path to call on your backend, e.g. /users or /orders/123. Automatically prefixed with /acc/proxy before the request is sent.
opts:NitroFetchOptions— optional
Standard $fetch options. Add captchaAction to the body to trigger automatic reCAPTCHA injection.

On This Page