Agent skill

nuxt-errors

Error handling with error classes, handlers, and interceptors. Use when handling API errors, displaying validation errors, configuring error handlers, or implementing error interceptors.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nuxt-errors

SKILL.md

Nuxt Error Handling

Centralized error handling with typed error classes and configurable handlers.

Core Concepts

errors.md - Error classes, handlers, interceptors

Error Classes

typescript
import { ValidationError } from '#layers/base/app/errors/validation-error'
import { ConflictError } from '#layers/base/app/errors/conflict-error'
import { TooManyRequestsError } from '#layers/base/app/errors/too-many-requests-error'

// ValidationError (422)
if (error instanceof ValidationError) {
  error.errors    // Record<string, string[]>
  error.message   // string
  error.mapToFormErrors()  // FormError[]
}

Error Handlers Configuration

typescript
// app.config.ts
export default defineAppConfig({
  errorHandlers: {
    401: async ({ flash }) => navigateTo('/auth/login'),
    422: async ({ response }) => Promise.reject(new ValidationError(response)),
    500: async ({ flash }) => flash.error('Server error'),
  },
})

Action Error Handling

typescript
const { handleActionError } = useHandleActionError()

try {
  await createPost(data)
} catch (error) {
  throw handleActionError(error, {
    entity: 'post',
    operation: 'create',
  })
}
// Shows: "Failed to create post. [error details]"

Didn't find tool you were looking for?

Be as detailed as possible for better results