Agent skill

nuxt-enums

TypeScript enum pattern with Castable interface for model integration. Use when creating enums with behavior methods (colors, labels), defining fixed value sets, or integrating enums with the model casting system.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/nuxt-enums-leeovery-claude-nuxt-c5c82d86

SKILL.md

Nuxt Enums

Class-based enums with behavior methods and model casting integration.

Core Concepts

enums.md - Complete enum patterns, behavior methods, UI integration

Basic Enum

typescript
// app/enums/PostStatus.ts
import Enum from '#layers/base/app/enums/Enum'
import type { Castable } from '#layers/base/app/types'

export default class PostStatus extends Enum implements Castable {
  // Static enum values
  static readonly Draft = PostStatus.create('draft')
  static readonly PendingReview = PostStatus.create('pending review')
  static readonly Published = PostStatus.create('published')
  static readonly Archived = PostStatus.create('archived')

  // Cast method for model system
  static cast(value: string): PostStatus {
    return PostStatus.coerce(value)
  }

  // Behavior methods
  color(): string {
    switch (this.value) {
      case 'draft': return 'neutral'
      case 'pending review': return 'warning'
      case 'published': return 'success'
      case 'archived': return 'error'
      default: return 'neutral'
    }
  }

  get text(): string {
    return this.value
  }
}

Usage

typescript
// In models (auto-cast from API string)
status: PostStatus

// Comparisons
post.status.is(PostStatus.Published)

// Get all values
PostStatus.values()

// In templates
<UBadge :color="post.status.color()">{{ post.status.text }}</UBadge>

Didn't find tool you were looking for?

Be as detailed as possible for better results