Customizing Generated Code

Nuxt Crouton follows a generate-then-customize approach. Once code is generated, it becomes yours to modify and extend as needed. This is the fundamental principle: generated code is your code, so edit it freely. After generation, the files live in your project and you own them completely. Customize them however you need. Just remember: regenerating will lose your changes. Unlike runtime admin panels or frameworks that lock you into their patterns, Nuxt Crouton gives you a starting point that you can modify without restriction.

Understanding the Ownership Model

When you run the generator, it creates files in your project structure:

layers/[layer]/
  ├── components/
  │   └── [collection]/
  │       ├── List.vue       # Yours to customize
  │       ├── Form.vue       # Yours to customize
  │       └── Table.vue      # Yours to customize
  ├── composables/
  │   └── use[Collection].ts # Yours to customize
  └── types/
      └── [collection].ts    # Yours to customize

These files are independent and not linked to the Nuxt Crouton core library. They simply use the core library's utilities. You can modify them without breaking updates to the core library, regenerate them if needed (though you'll lose customizations), copy patterns between collections, and version control your customizations.

When to Customize vs Regenerate

Customize when:

• Adding new fields to forms
• Changing validation logic
• Adding custom UI components
• Implementing business logic
• Styling components

Regenerate when:

• You want to start over with a clean slate
• You need to add/remove base fields
• You're updating to a new Nuxt Crouton version and want new patterns
• You made a mistake and want to reset

Next Steps

Now that you understand the ownership model, learn how to make common customizations:

• Add Custom Components - Extend forms with rich editors, file uploads, and more
• Add Custom Columns - Customize table display and computed columns