Skip to content

Error Handling

While the idea of this Nuxt module is to mask your real API (and credentials) within the server proxy, Nuxt API Party will minimize the hassle of handling errors by passing through the following properties to the response on the client:

  • Response body
  • HTTP status code
  • HTTP status message
  • Headers

Thus, if the request to your API fails, you can still handle the error response in your Nuxt app just like you would with a direct API call. In this case, both generated composables per endpoint will throw a NuxtError if your API fails to deliver.

Logging the available error properties will provide you insights on what went wrong:

console.log(error.statusCode) // `404`
console.log(error.statusMessage) // `Not Found`
console.log( // Whatever your API returned

See all available examples below.

NuxtError Type Declaration

interface NuxtError<DataT = unknown> extends H3Error<DataT> {}

// See
class H3Error<DataT = unknown> extends Error {
  static __h3_error__: boolean
  statusCode: number
  fatal: boolean
  unhandled: boolean
  statusMessage?: string
  data?: DataT
  cause?: unknown
  constructor(message: string, opts?: {
    cause?: unknown
  toJSON(): Pick<H3Error<DataT>, 'data' | 'statusCode' | 'statusMessage' | 'message'>



The examples below assume that you have set up an API endpoint called jsonPlaceholder:

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-api-party'],

  apiParty: {
    endpoints: {
      jsonPlaceholder: {
        url: ''

Usage With useFetch-Like Composable

When using the useFetch-like composable composable, the error is already typed as a NuxtError.

const { data, error } = await useJsonPlaceholderData('not/available')

watchEffect(() => {
  if (error.value)

Usage With $fetch-Like Composable

When using the $fetch-like composable composable, you need to cast the error to a NuxtError.

import type { NuxtError } from '#app'

function onSubmit() {
  try {
    const response = await $jsonPlaceholder('not/available', {
      method: 'POST',
      body: form.value
  catch (error) {
    console.error((error as NuxtError).data)

Released under the MIT License.