Quick Start

Let's generate your first working CRUD collection in under a minute.

1. Create Your Schema

Start by creating a JSON file that defines your collection fields:

cat > product-schema.json << 'EOF'
[
  { "name": "name", "type": "string" },
  { "name": "description", "type": "text" },
  { "name": "price", "type": "number" },
  { "name": "inStock", "type": "boolean" }
]
EOF

2. Generate the Collection

Now run the generator command:

npx crouton-generate shop products --fields-file product-schema.json

This creates several files in your project: a List.vue component for table and list views, a Form.vue component for creating and editing items, a Table.vue table component, a useProducts.ts composable containing validation, column definitions, and defaults, and a products.ts file with TypeScript types.

layers/shop/
  ├── components/
  │   └── products/
  │       ├── List.vue       # Table/list view
  │       ├── Form.vue       # Create/edit form
  │       └── Table.vue      # Table component
  ├── composables/
  │   └── useProducts.ts     # Validation, columns, defaults
  └── types/
      └── products.ts        # TypeScript types

3. Register Collection

Next, register your collection in app.config.ts:

export default defineAppConfig({
  croutonCollections: {
    shopProducts: {
      name: 'shopProducts',
      layer: 'shop',
      componentName: 'ShopProductsForm',
      apiPath: 'shop-products',
    }
  }
})

4. Add CroutonForm to App

Add the <CroutonForm /> component to your app.vue. This component renders the modal/slideover forms for creating and editing items:

<template>
  <UApp>
    <NuxtPage />
    <CroutonForm />  <!-- Required for inline editing -->
  </UApp>
</template>

5. Use in Your App

Add the component to a page:

<template>
  <ShopProductsList />
</template>

Nuxt Crouton provides CRUD endpoints automatically. Your generated components use these out of the box—no custom API routes needed.

That's It!

You now have a working CRUD interface with modal forms for creating, editing, and deleting items, a sortable table, type-safe code, and validation—all generated and ready to use.

Customize

The generated code belongs to your project, so you can edit it however you need. Here's an example of adding a custom field:

<template>
  <UForm :state="state" :schema="schema" @submit="handleSubmit">
    <!-- Generated fields -->
    <UFormField label="Name" name="name">
      <UInput v-model="state.name" />
    </UFormField>

    <!-- Add your custom field -->
    <UFormField label="Category" name="categoryId">
      <USelectMenu
        v-model="state.categoryId"
        :options="categories"
        option-attribute="name"
      />
    </UFormField>

    <CroutonButton
      :action="action"
      :collection="collection"
      :loading="loading"
    />
  </UForm>
</template>

Next Steps

• Learn about Collections and how they work
• Understand Data Operations for mutations
• Explore Customization options