DevTools Addon

The @friendlyinternet/nuxt-crouton-devtools package provides a comprehensive Nuxt DevTools integration for visually inspecting, monitoring, and debugging your Crouton collections during development.

Overview

Nuxt Crouton DevTools adds a dedicated "Crouton" tab to the Nuxt DevTools panel, providing real-time visibility into your CRUD collections, API endpoints, and database operations.

Key Features

• Collection Inspector - Browse and search all registered collections
• Endpoint Monitoring - Track API calls with timing and status
• Operation Tracking - Monitor CRUD operations in real-time
• Request Execution - Test API endpoints directly from DevTools
• Zero Configuration - Automatically discovers your collections

Installation

1. Install Package

pnpm add -D @friendlyinternet/nuxt-crouton-devtools

pnpm add -D @friendlyinternet/nuxt-crouton-devtools@0.3.0 --save-exact

2. Add Module to Configuration

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',                              // Required
    '@friendlyinternet/nuxt-crouton-devtools'      // Add this
  ],

  devtools: {
    enabled: true  // Ensure DevTools is enabled
  }
})

3. Start Development Server

pnpm dev

Open Nuxt DevTools (look for the DevTools icon in the bottom-right corner) and find the Crouton tab.

Requirements

• Nuxt: v4.0.0 or higher
• @nuxt/devtools: v1.6.4 or higher (installed automatically)
• @friendlyinternet/nuxt-crouton: Any version

Core Features

1. Collection Inspector

The Collection Inspector provides a visual overview of all registered collections in your application.

What You'll See

Each collection card displays:

• Collection Name - Human-readable name
• API Path - Generated endpoint path (e.g., /api/crouton-collection/tasks)
• Layer Badge - Type indicator (internal/external/custom)
• Component Name - Associated Vue component (for internal collections)
• Description - Meta description (if configured)
• Collection Key - Unique identifier

Search & Filter

Use the search bar to quickly find collections:

Search: "tasks"        → Finds tasks collection
Search: "internal"     → Shows all internal collections
Search: "/api/users"   → Finds by API path

Detail View

Click any collection card to view full configuration:

• Complete JSON schema
• All metadata fields
• Custom configuration
• Default values
• Column definitions

Example Detail View:

{
  "key": "tasks",
  "name": "tasks",
  "layer": "internal",
  "apiPath": "/api/crouton-collection/tasks",
  "componentName": "CroutonCollectionTasksCreate",
  "meta": {
    "label": "Tasks",
    "description": "Project task management",
    "icon": "i-heroicons-check-circle"
  },
  "defaultValues": {
    "status": "pending"
  },
  "columns": ["title", "status", "assignee", "dueDate"]
}

2. Endpoint Monitoring

The DevTools integration automatically generates and lists all available CRUD endpoints for each collection.

Generated Endpoints

For each collection, the following endpoints are documented:

Endpoint Parameters

Each endpoint shows available parameters:

List/Search Parameters:

• page (number) - Page number (default: 1)
• limit (number) - Items per page (default: 10)
• filter (json) - Filter object (e.g., {"active": true})
• sort (string) - Sort field (e.g., "createdAt")

Get/Update/Delete Parameters:

• id (string, required) - Item ID (path parameter)

RPC Interface

Endpoints are accessible via the DevTools RPC interface:

// Fetch all endpoints
GET /__nuxt_crouton_devtools/api/endpoints

// Response format
{
  "success": true,
  "data": [
    {
      "collection": "tasks",
      "operation": "list",
      "method": "GET",
      "path": "/api/crouton-collection/tasks/search",
      "params": [...],
      "requiresBody": false
    },
    // ... more endpoints
  ],
  "count": 20  // Total endpoints (5 per collection × 4 collections)
}

3. Operation Tracking

The DevTools integration tracks all CRUD operations in real-time using an in-memory operation store.

What Gets Tracked

Every API call to a Crouton collection endpoint is logged with:

{
  id: "op_1700000000000_abc123",      // Unique operation ID
  timestamp: 1700000000000,            // Unix timestamp (ms)
  collection: "tasks",                 // Collection name
  operation: "create",                 // Operation type
  method: "POST",                      // HTTP method
  path: "/api/crouton-collection/tasks", // Full path
  status: 201,                         // HTTP status code
  duration: 45,                        // Response time (ms)
  teamContext: "team_xyz",             // Team ID (if applicable)
  error: undefined                     // Error message (if failed)
}

Operation Types

The tracker automatically detects operation types:

• list - GET requests to /search or base endpoint
• get - GET requests with an ID parameter
• create - POST requests
• update - PATCH or PUT requests
• delete - DELETE requests

Circular Buffer

Operations are stored in a circular buffer (max 500 operations) to prevent memory issues during long development sessions.

Filtering Operations

Retrieve operations with filters:

// Get all operations
GET /__nuxt_crouton_devtools/api/operations

// Filter by collection
GET /__nuxt_crouton_devtools/api/operations?collection=tasks

// Filter by operation type
GET /__nuxt_crouton_devtools/api/operations?operation=create

// Filter by status (success/error)
GET /__nuxt_crouton_devtools/api/operations?status=error

// Filter by timestamp (since)
GET /__nuxt_crouton_devtools/api/operations?since=1700000000000

// Combine filters
GET /__nuxt_crouton_devtools/api/operations?collection=tasks&status=success

Operation Statistics

Get aggregated statistics:

GET /__nuxt_crouton_devtools/api/operations/stats

// Response
{
  "success": true,
  "data": {
    "total": 127,                      // Total operations tracked
    "byCollection": {
      "tasks": 45,
      "projects": 38,
      "users": 44
    },
    "byOperation": {
      "list": 52,
      "get": 31,
      "create": 24,
      "update": 15,
      "delete": 5
    },
    "successRate": 94,                 // Percentage
    "avgDuration": 38,                 // Average response time (ms)
    "successful": 119,                 // Success count
    "failed": 8                        // Failure count
  }
}

Clear Operation History

Clear all tracked operations:

POST /__nuxt_crouton_devtools/api/operations/clear

4. Request Execution

Test API endpoints directly from DevTools without writing code or using external tools like Postman.

Execute Requests

Submit requests to any collection endpoint:

POST /__nuxt_crouton_devtools/api/execute

// Request body
{
  "method": "POST",
  "path": "/api/crouton-collection/tasks",
  "params": {
    "title": "Test Task",
    "status": "pending"
  },
  "requestBody": {
    "title": "Complete documentation",
    "status": "in_progress",
    "assignee": "user_123",
    "dueDate": "2024-12-01"
  },
  "headers": {
    "Authorization": "Bearer <token>"
  }
}

// Response
{
  "success": true,
  "status": 201,
  "data": {
    "id": "task_abc123",
    "title": "Complete documentation",
    "status": "in_progress",
    // ... rest of created task
  },
  "duration": 42  // Response time in ms
}

Path Parameters

The execution engine automatically replaces path parameters:

// Request
{
  "method": "GET",
  "path": "/api/crouton-collection/tasks/:id",
  "params": {
    "id": "task_abc123"
  }
}

// Actual request sent to: /api/crouton-collection/tasks/task_abc123

Query Parameters

For GET requests, non-path parameters become query strings:

// Request
{
  "method": "GET",
  "path": "/api/crouton-collection/tasks/search",
  "params": {
    "page": 2,
    "limit": 20,
    "filter": JSON.stringify({ active: true }),
    "sort": "-createdAt"
  }
}

// Actual request sent to:
// /api/crouton-collection/tasks/search?page=2&limit=20&filter=%7B%22active%22%3Atrue%7D&sort=-createdAt

Error Handling

Failed requests return detailed error information:

{
  "success": false,
  "status": 404,
  "error": "Item not found",
  "data": {
    "statusCode": 404,
    "message": "Task with ID 'invalid_id' not found"
  },
  "duration": 15
}

DevTools UI Components

The DevTools integration includes several Vue components that power the visual interface.

CollectionCard Component

Displays a single collection in a card format.

Props:

interface Props {
  collection: CroutonCollection
}

interface CroutonCollection {
  key: string
  name: string
  layer?: string
  apiPath?: string
  componentName?: string | null
  meta?: {
    label?: string
    description?: string
    icon?: string
  }
  defaultValues?: Record<string, any>
  columns?: string[]
  schema?: any
}

Events:

• @view-details - Emitted when card is clicked

Features:

• Layer-based color coding (blue for external, green for internal, purple for custom)
• Displays description, component name, and key
• Hover effects and click handling

CollectionDetailModal Component

Shows full collection configuration in a modal.

Props:

interface Props {
  modelValue?: boolean      // Controls visibility
  collection?: CroutonCollection | null
}

Events:

• @update:modelValue - Two-way binding for visibility

Features:

• Syntax-highlighted JSON display
• Copy to clipboard functionality
• Scrollable content for large schemas

Main DevTools View

The main index page provides:

• Search bar with real-time filtering
• Grid layout of collection cards
• Empty state messaging
• Loading states
• Error handling

RPC API Reference

The DevTools integration exposes several RPC endpoints for programmatic access.

Collections Endpoint

GET /__nuxt_crouton_devtools/api/collections

Retrieve all registered collections.

Response:

{
  success: boolean
  data: CroutonCollection[]
  count: number
}

Operations Endpoint

GET /__nuxt_crouton_devtools/api/operations

Retrieve tracked operations with optional filters.

Query Parameters:

• collection (string) - Filter by collection name
• operation (string) - Filter by operation type
• status (string) - Filter by status ("success" | "error")
• since (number) - Filter by timestamp (Unix ms)

Response:

{
  success: boolean
  data: Operation[]
  count: number
  filters: OperationFilters
}

Operation Stats Endpoint

GET /__nuxt_crouton_devtools/api/operations/stats

Get aggregated operation statistics.

Response:

{
  success: boolean
  data: {
    total: number
    byCollection: Record<string, number>
    byOperation: Record<string, number>
    successRate: number
    avgDuration: number
    successful: number
    failed: number
  }
}

Clear Operations Endpoint

POST /__nuxt_crouton_devtools/api/operations/clear

Clear all tracked operations.

Response:

{
  success: boolean
}

Endpoints Listing

GET /__nuxt_crouton_devtools/api/endpoints

List all available CRUD endpoints.

Response:

{
  success: boolean
  data: Endpoint[]
  count: number
}

interface Endpoint {
  collection: string
  operation: string
  method: string
  path: string
  params: Parameter[]
  requiresBody: boolean
  bodyDescription?: string
}

Execute Request Endpoint

POST /__nuxt_crouton_devtools/api/execute

Execute an API request.

Request Body:

{
  method: string           // HTTP method
  path: string            // Endpoint path (with :params)
  params?: Record<string, any>
  requestBody?: any
  headers?: Record<string, string>
}

Response:

{
  success: boolean
  status: number
  data?: any
  error?: string
  duration: number  // ms
}

Architecture & Implementation

Module Structure

The DevTools module is organized as follows:

packages/nuxt-crouton-devtools/
├── src/
│   ├── module.ts                          # Main Nuxt module
│   ├── runtime/
│   │   ├── client/                        # DevTools UI (iframe app)
│   │   │   ├── app.vue                    # Root component
│   │   │   ├── pages/
│   │   │   │   └── index.vue              # Main collections view
│   │   │   ├── components/
│   │   │   │   ├── CollectionCard.vue     # Collection card
│   │   │   │   └── CollectionDetailModal.vue
│   │   │   └── composables/
│   │   │       └── useCroutonCollections.ts
│   │   ├── pages/
│   │   │   └── data-browser.vue           # Data browser (Phase 3)
│   │   ├── server-rpc/                    # RPC API handlers
│   │   │   ├── collections.ts             # Collections endpoint
│   │   │   ├── endpoints.ts               # Endpoints listing
│   │   │   ├── operations.ts              # Operations retrieval
│   │   │   ├── operationStats.ts          # Statistics
│   │   │   ├── clearOperations.ts         # Clear history
│   │   │   ├── executeRequest.ts          # Request execution
│   │   │   └── client.ts                  # Client HTML server
│   │   └── server/
│   │       ├── middleware/
│   │       │   └── operationTracker.ts    # Tracks API calls
│   │       ├── plugins/
│   │       │   └── operationTracker.ts    # Nitro plugin
│   │       └── utils/
│   │           └── operationStore.ts      # In-memory storage
├── playground/                            # Development playground
└── package.json

How It Works

1. Module Registration

The module registers itself with Nuxt DevTools:

// src/module.ts
import { addCustomTab } from '@nuxt/devtools-kit'

addCustomTab(() => ({
  name: 'crouton',
  title: 'Crouton',
  icon: 'carbon:data-table',
  view: {
    type: 'iframe',
    src: '/__nuxt_crouton_devtools',  // Iframe URL
  },
}))

2. Collection Discovery

Collections are read from app.config.croutonCollections and stored in Nitro runtime config:

// src/module.ts
nuxt.options.nitro.runtimeConfig.croutonCollections = 
  nuxt.options.appConfig?.croutonCollections || {}

The collections RPC handler reads this configuration:

// src/runtime/server-rpc/collections.ts
const appConfig = useAppConfig()
const collections = appConfig.croutonCollections || {}

3. Operation Tracking

A Nitro middleware intercepts all requests to /api/crouton-collection/*:

// src/runtime/server/middleware/operationTracker.ts
export default defineEventHandler(async (event) => {
  const path = event.path
  
  // Only track Crouton collection API routes
  if (!path.startsWith('/api/crouton-collection/')) {
    return
  }

  // Extract metadata
  const collection = extractCollectionName(path)
  const operation = detectOperation(method, path)
  const startTime = Date.now()

  // Track operation after response
  event.node.res.on('finish', () => {
    operationStore.add({
      id: generateId(),
      timestamp: startTime,
      collection,
      operation,
      method,
      path,
      status: event.node.res.statusCode,
      duration: Date.now() - startTime
    })
  })
})

4. Circular Buffer Storage

Operations are stored in-memory with a circular buffer:

// src/runtime/server/utils/operationStore.ts
class OperationStore {
  private operations: Operation[] = []
  private readonly maxSize = 500  // Prevent memory issues

  add(operation: Operation): void {
    this.operations.unshift(operation)
    
    // Maintain circular buffer
    if (this.operations.length > this.maxSize) {
      this.operations = this.operations.slice(0, this.maxSize)
    }
  }
}

5. RPC Communication

RPC endpoints handle communication between the DevTools iframe and the Nuxt server:

// DevTools UI fetches data
const response = await $fetch('/__nuxt_crouton_devtools/api/collections')

Development Mode Only

The module only activates in development:

// src/module.ts
async setup(_options, nuxt) {
  // Only enable in development mode
  if (nuxt.options.dev === false) {
    return
  }
  
  // ... rest of setup
}

Production builds completely exclude the DevTools code.

Usage Examples

Basic Setup

Minimal configuration to get started:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',
    '@friendlyinternet/nuxt-crouton-devtools'
  ],

  devtools: {
    enabled: true
  }
})

// app.config.ts
export default defineAppConfig({
  croutonCollections: {
    tasks: {
      name: 'tasks',
      layer: 'internal',
      apiPath: '/api/crouton-collection/tasks',
      meta: {
        label: 'Tasks',
        icon: 'i-heroicons-check-circle'
      }
    }
  }
})

Viewing Collections

1. Start dev server: pnpm dev
2. Open Nuxt DevTools (icon in bottom-right)
3. Click Crouton tab
4. See all registered collections
5. Click a collection card to view details

Monitoring Operations

1. Use your app normally (create, edit, delete items)
2. Check DevTools Crouton tab
3. View real-time operation logs
4. See timing, status codes, and errors

Testing Endpoints

From the DevTools UI (or programmatically):

// Create a task
const response = await $fetch('/__nuxt_crouton_devtools/api/execute', {
  method: 'POST',
  body: {
    method: 'POST',
    path: '/api/crouton-collection/tasks',
    requestBody: {
      title: 'Test task',
      status: 'pending'
    }
  }
})

console.log(response)
// {
//   success: true,
//   status: 201,
//   data: { id: 'task_123', ... },
//   duration: 42
// }

Filtering Operations

// Get failed operations
const errors = await $fetch('/__nuxt_crouton_devtools/api/operations?status=error')

// Get recent task operations
const recentTasks = await $fetch(
  '/__nuxt_crouton_devtools/api/operations?collection=tasks&since=' + 
  (Date.now() - 60000) // Last minute
)

Viewing Statistics

const stats = await $fetch('/__nuxt_crouton_devtools/api/operations/stats')

console.log(`Success rate: ${stats.data.successRate}%`)
console.log(`Average response time: ${stats.data.avgDuration}ms`)
console.log('Operations by collection:', stats.data.byCollection)

Debugging Workflows

1. Collection Configuration Issues

Problem: Collection not appearing in DevTools.

Debug Steps:

1. Open DevTools Crouton tab
2. If collection is missing, check app.config.croutonCollections
3. Ensure collection key matches expected format
4. Refresh collections (reload DevTools tab)

Common Issues:

• Collection not defined in app.config.ts
• Typo in collection key
• Missing name field

2. API Endpoint Errors

Problem: API calls failing with 404 or 500 errors.

Debug Steps:

1. Check Operations view in DevTools
2. Filter by status=error
3. Inspect error messages and status codes
4. Verify endpoint path matches generated routes
5. Use Execute Request to test manually

Common Issues:

• Incorrect API path configuration
• Missing server handlers
• Team context not set correctly

3. Performance Issues

Problem: Slow API responses.

Debug Steps:

1. View Operation Stats
2. Check avgDuration metric
3. Filter operations by collection to isolate slow endpoints
4. Look for operations with high duration values

Common Issues:

• Database queries without indexes
• N+1 query problems
• Large payload sizes

4. Filtering Not Working

Problem: Search results not showing expected items.

Debug Steps:

1. Clear operation history
2. Trigger operations again
3. Check filter parameters in RPC calls
4. Verify filter objects are properly JSON-encoded

Common Issues:

• Incorrect filter syntax
• Case sensitivity issues
• Filter field doesn't exist in schema

Best Practices

1. Monitor Operations During Development

Keep the DevTools Crouton tab open while developing:

// You'll immediately see:
- Which endpoints are being called
- How long they take
- Which ones fail
- What errors occur

2. Clear Operation History Regularly

Prevent confusion from old operations:

// Clear history when starting new feature
await $fetch('/__nuxt_crouton_devtools/api/operations/clear', {
  method: 'POST'
})

3. Use Request Execution for Testing

Test endpoints without writing code:

// Instead of creating test files, use DevTools to:
- Test new endpoints
- Validate request/response formats
- Check error handling
- Verify filters and sorting

4. Track Success Rates

Monitor operation statistics to catch issues early:

// Check stats periodically
const stats = await $fetch('/__nuxt_crouton_devtools/api/operations/stats')

if (stats.data.successRate < 90) {
  console.warn('High error rate detected!')
}

5. Isolate Collection Issues

Filter operations by collection when debugging:

// Focus on specific collection
GET /__nuxt_crouton_devtools/api/operations?collection=tasks

Troubleshooting

DevTools Tab Not Appearing

Issue: The "Crouton" tab doesn't show up in Nuxt DevTools.

Solutions:

1. Verify DevTools is enabled:

   // nuxt.config.ts
   export default defineNuxtConfig({
     devtools: {
       enabled: true  // Must be true
     }
   })
   

2. Check module is loaded:

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: [
       '@nuxt/devtools',  // Required
       '@friendlyinternet/nuxt-crouton-devtools'  // Must be present
     ]
   })
   

3. Restart dev server:

   # Stop server (Ctrl+C)
   pnpm dev
   

4. Clear Nuxt cache:

   rm -rf .nuxt
   pnpm dev
   

Collections Not Loading

Issue: DevTools opens but shows "No collections found".

Solutions:

1. Check app.config.ts:

   // Ensure collections are defined
   export default defineAppConfig({
     croutonCollections: {
       tasks: { ... }  // Must have at least one
     }
   })
   

2. Verify collection format:

   // Each collection needs minimum fields
   {
     name: 'tasks',  // Required
     // Other fields optional
   }
   

3. Check console for errors:
   • Open browser DevTools
   • Look for RPC errors
   • Check Network tab for failed requests

Operations Not Tracked

Issue: Operation tracking shows no data.

Solutions:

1. Ensure operations target correct paths:

   // Must start with /api/crouton-collection/
   GET /api/crouton-collection/tasks/search  ✅
   GET /api/custom-tasks                     ❌
   

2. Verify middleware is loaded:
   • Check Nitro plugins are registered
   • Look for operationTracker in Nuxt build output
3. Check operation buffer:
   • Max 500 operations stored
   • Older operations are dropped
   • Clear history and try again

Request Execution Fails

Issue: Testing endpoints via Execute Request returns errors.

Solutions:

1. Verify endpoint exists:

   // Check endpoints list first
   GET /__nuxt_crouton_devtools/api/endpoints
   

2. Check request format:

   // Must include method and path
   {
     "method": "GET",           // Required
     "path": "/api/...",        // Required
     "params": { ... },         // Optional
     "requestBody": { ... }     // Optional (for POST/PATCH)
   }
   

3. Inspect error response:

   {
     "success": false,
     "status": 404,
     "error": "Not found",  // Read this message
     "data": { ... }        // Additional error details
   }
   

High Memory Usage

Issue: DevTools integration consuming too much memory.

Solutions:

1. Clear operation history:

   POST /__nuxt_crouton_devtools/api/operations/clear
   

2. Restart dev server:
   • Operation buffer resets on restart
   • Max 500 operations enforced
3. Reduce operation tracking:
   • Only use DevTools when needed
   • Close DevTools tab when not debugging

Performance Considerations

Memory Usage

The operation store uses a circular buffer (max 500 operations) to prevent unbounded memory growth:

// Automatic cleanup
if (operations.length > maxSize) {
  operations = operations.slice(0, maxSize)
}

Memory footprint:

• Each operation: ~200-500 bytes
• Max 500 operations: ~100-250 KB
• Negligible impact on development

CPU Impact

Operation tracking has minimal overhead:

• Middleware execution: <1ms per request
• Buffer management: O(1) insert, O(n) filter
• Stats calculation: O(n) but cached

Best practice: Clear history periodically during long sessions.

Network Impact

RPC calls are lightweight:

• Collections endpoint: ~1-10 KB (depending on config size)
• Operations endpoint: ~5-50 KB (depending on history)
• Stats endpoint: <1 KB
• Execute endpoint: Variable (depends on response)

Best practice: Use filtering to reduce response sizes.

Roadmap & Future Features

The DevTools integration is in Phase 1 (MVP). Future phases will add:

Phase 2: CRUD Operations Monitoring

• Real-time operation logs (WebSocket)
• Request/response inspection
• Error stack traces
• Performance profiling

Phase 3: Collection Data Browser

• Browse collection data inline
• Inline editing capabilities
• Bulk operations
• Export/import data

Phase 4: Generator History

• View generator runs
• Rollback to previous versions
• Diff view for changes
• Re-run generators

Phase 5: Advanced Tools

• Schema validation debugger
• i18n translation manager
• Collection graph visualization
• Performance recommendations

Migration & Breaking Changes

v0.3.0 (Current)

Initial beta release. No migration needed.

Future Versions

When breaking changes occur, this section will provide:

• List of breaking changes
• Migration steps
• Code examples (before/after)
• Deprecation warnings

Contributing

The DevTools integration welcomes contributions!

Areas for Improvement

• UI/UX enhancements - Better visualizations, layouts
• Additional RPC endpoints - New debugging capabilities
• Performance optimizations - Reduce overhead
• Documentation - More examples and guides

Development Setup

# Clone repository
git clone https://github.com/friendlyinternet/nuxt-crouton.git
cd nuxt-crouton/packages/nuxt-crouton-devtools

# Install dependencies
pnpm install

# Start playground
pnpm dev

# Build module
pnpm build

Testing

# Run in playground
cd playground
pnpm dev

# Open DevTools and test features

See CONTRIBUTING.md for full guidelines.

FAQ

Is this safe to use in production?

No. The DevTools integration only runs in development mode (nuxt dev) and is completely excluded from production builds. It has zero impact on production performance or bundle size.

However, since it's a beta package (v0.x), the API may change between versions. Use with caution.

Does it work with Nuxt 3?

No. The DevTools integration requires Nuxt 4.0.0 or higher. It uses Nuxt 4-specific APIs and module patterns.

Can I use it without @nuxt/devtools?

No. The package requires @nuxt/devtools to be installed and enabled. The DevTools integration appears as a custom tab within the Nuxt DevTools panel.

Does it track production data?

No. The module does not load in production environments. All tracking, monitoring, and debugging features are development-only.

Can I customize the DevTools UI?

Not currently. The UI is bundled with the package and not customizable. Future versions may support theming or plugins.

Does it affect my app's performance?

In development, the impact is minimal:

• Middleware overhead: <1ms per request
• Memory usage: ~100-250 KB (circular buffer)
• No impact on production builds

Can I programmatically access operation data?

Yes! Use the RPC endpoints:

// Fetch operations
const ops = await $fetch('/__nuxt_crouton_devtools/api/operations')

// Get statistics
const stats = await $fetch('/__nuxt_crouton_devtools/api/operations/stats')

What data is stored in the operation buffer?

Only metadata is stored (no request/response bodies):

• Timestamp, collection name, operation type
• HTTP method, path, status code
• Response duration
• Team context (if applicable)
• Error message (if failed)

Request/response bodies are not stored to minimize memory usage.

Can I export operation logs?

Not currently. This is a planned feature for Phase 2. For now, you can fetch operations via the RPC API and save manually:

const ops = await $fetch('/__nuxt_crouton_devtools/api/operations')
console.log(JSON.stringify(ops, null, 2))

Will this graduate to v1.0 stable?

If the DevTools integration proves valuable and gains community adoption, it will eventually graduate to v1.0 stable with a stable API and semantic versioning guarantees.

Related Resources

Nuxt Crouton Documentation

• Core Documentation - Main Crouton guide
• Collections - Understanding collections
• API Reference - Complete API docs
• Features - All features including experimental packages

Nuxt DevTools

• Nuxt DevTools Docs - Official DevTools guide
• DevTools Kit - Module API docs
• Custom Tabs - Creating DevTools integrations

Related Packages

• @friendlyinternet/nuxt-crouton - Core library
• @friendlyinternet/nuxt-crouton-collection-generator - CLI generator
• Features - All features including experimental packages

Summary

The @friendlyinternet/nuxt-crouton-devtools package provides comprehensive development tooling for Crouton collections:

• Collection Inspector - Browse and search all registered collections
• Endpoint Monitoring - Track API calls with detailed timing and status
• Operation Tracking - Monitor CRUD operations in real-time with statistics
• Request Execution - Test endpoints directly from DevTools
• RPC API - Programmatic access to debugging data
• Zero Configuration - Automatically discovers collections
• Development Only - Zero impact on production builds

Next Steps:

1. Install the package and add to your project
2. Explore collections in the DevTools panel
3. Monitor operations during development
4. Test endpoints without external tools
5. Provide feedback to shape future development