Nuxt Crouton
Reference

Glossary

Definitions of key terms and concepts in Nuxt Crouton

This glossary defines the key terms and concepts used throughout Nuxt Crouton documentation.

A

API Endpoint

Server-side route that handles HTTP requests for a collection. Nuxt Crouton generates RESTful endpoints for CRUD operations:

  • GET /api/[collection] - List items
  • POST /api/[collection] - Create item
  • GET /api/[collection]/[id] - Get single item
  • PUT /api/[collection]/[id] - Update item
  • DELETE /api/[collection]/[id] - Delete item

See also: Server API

Auto-Generated Fields

Fields automatically added to every collection by the generator based on configuration flags:

  • id - Always added (primary key)
  • createdAt, updatedAt, updatedBy - Added when useMetadata: true (default)
  • teamId, userId - Added when useTeamUtility: true

Important: Never define these manually in your schema.

See also: Schema Format

C

Cache Invalidation

Process of clearing cached data when underlying data changes. Nuxt Crouton automatically invalidates caches after mutations using refreshNuxtData().

Example:

// Invalidate all queries for a collection
await refreshNuxtData((key) => key.startsWith('collection:products:'))

See also: Caching

Collection

The fundamental building block of Nuxt Crouton. A collection represents a data model (like products, users, or posts) and includes:

  • Database schema (via Drizzle ORM)
  • Generated CRUD components
  • API endpoints
  • TypeScript types
  • Composables for data operations

Naming: Always use plural names (products, not product)

See also: Collections

Collection Schema

YAML or JSON file that defines the structure of a collection, including:

  • Field names and types
  • Validation rules
  • Relationships to other collections
  • Metadata (description, icon)

Location: collections/[name].yml

See also: Schema Format

Component Override

Replacing a generated component with your own custom implementation by creating a component with the same name in your layer.

Example:

layers/products/components/
└── CroutonForm.vue  ← Overrides generated form

See also: Customization

Composable

Vue Composition API function that encapsulates reusable logic. Nuxt Crouton provides composables for data operations:

  • useCollectionQuery() - Fetch data
  • useCollectionMutation() - Create/update/delete
  • useCollectionForm() - Form state management
  • useCollectionTable() - Table data and pagination

Naming: Always start with use prefix

See also: Composables API

Core Layer

The base Nuxt Crouton framework code in node_modules/@friendlyinternet/nuxt-crouton. This code is never modified directly.

See also: Architecture

CRUD

Create, Read, Update, Delete - The four basic operations for persistent storage. Nuxt Crouton auto-generates CRUD operations for every collection.

D

Domain-Driven Design (DDD)

Software design approach that organizes code by business domain rather than technical function. Nuxt Crouton uses layers to implement DDD.

Example:

layers/
├── shop/      # Shop domain (products, orders)
├── blog/      # Blog domain (posts, authors)
└── auth/      # Auth domain (users, sessions)

See also: Architecture

Drizzle ORM

TypeScript ORM (Object-Relational Mapping) used by Nuxt Crouton for database operations. Provides type-safe query builder.

External: Drizzle ORM Docs

See also: Drizzle Integration

F

Field

A property of a collection that represents a single piece of data (like title, price, createdAt).

Field Types:

  • Text: text, longtext, richtext
  • Number: integer, decimal
  • Boolean: boolean
  • Date: date, datetime, timestamp
  • Reference: reference (relationships)
  • Select: select (enum)

Naming: Use camelCase (firstName, isActive, publishedAt)

See also: Schema Format

Form Component

Auto-generated Vue component that renders a form for creating/editing collection items. Includes validation, error handling, and save/cancel actions.

Component: CroutonForm.vue

Customization: Use #field-[name] slots to override specific fields

See also: Forms

G

Generated Code

Code automatically created by the Nuxt Crouton CLI based on your collection schemas. Includes components, composables, API routes, and database schema.

Location: layers/[collection-name]/

Regeneration: Safe to regenerate without losing customizations if you follow conventions

See also: Generated Code

Generated Layer

A Nuxt layer created by the Nuxt Crouton generator for a specific collection or domain. Contains all generated code for that collection.

Example:

layers/products/  ← Generated layer for products collection
├── components/
├── composables/
├── server/
└── types/

See also: Layers

I

Internationalization (i18n)

Multi-language support feature that allows translating collection fields into multiple languages.

Status: Stable ✅

See also: Internationalization

L

Layer

Nuxt's mechanism for extending applications with reusable code. Nuxt Crouton uses layers to organize collections by domain.

Types:

  • Core Layer: Framework code (@friendlyinternet/nuxt-crouton)
  • Generated Layer: Auto-generated collection code (layers/products/)
  • Feature Layer: Optional features (@friendlyinternet/nuxt-crouton-i18n)

External: Nuxt Layers Guide

See also: Architecture

M

Migration

Database schema change managed by Drizzle ORM. Generated automatically when schemas change.

See also: Migration Guide

Mutation

Operation that modifies data (create, update, delete). In Nuxt Crouton, handled by useCollectionMutation() or useCroutonMutate().

See also: Mutation Composables API, Data Operations

N

Nuxt UI

Component library used by Nuxt Crouton for UI elements (forms, tables, modals, buttons, etc.).

Version: Nuxt Crouton uses Nuxt UI v4

External: Nuxt UI Docs

O

Override

See Component Override

P

Pagination

Splitting large datasets into smaller pages for performance and usability.

Pagination Examples: For complete pagination patterns, see Querying Data.

See also: Patterns - Tables

Q

Query

Operation that retrieves data without modifying it. In Nuxt Crouton, handled by useCollectionQuery().

Query Examples: For complete useCollectionQuery patterns including filters and sorting, see Querying Data.

See also: Querying Data

R

Reference Field

Field type that creates a relationship between collections. Uses ref-target to specify the target collection.

Example:

fields:
  - name: authorId
    type: reference
    ref-target: users

See also: Relations

Ref-Target

Property of a reference field that specifies which collection it points to. Must be a plural collection name.

Example:

- name: categoryId
  type: reference
  ref-target: categories  # Plural collection name

See also: Relations

Relation

Connection between two collections, implemented using reference fields.

Types:

  • One-to-Many: One user has many posts
  • Many-to-Many: Many posts have many tags

See also: Relations

S

Schema

See Collection Schema

Slot

Vue mechanism for customizing component content. Nuxt Crouton components expose slots for customization:

  • #field-[name] - Override form field
  • #column-[name] - Override table column
  • #actions - Override action buttons

Example:

<CroutonForm>
  <template #field-price>
    <CustomPriceField />
  </template>
</CroutonForm>

See also: Customization

Stability Status

Label indicating production-readiness of a feature:

  • Stable ✅ - Production-ready, API stable
  • Beta 🔬 - Feature-complete, minor changes possible
  • Experimental ⚠️ - Under development, API may change

See also: Features Overview

T

Table Component

Auto-generated Vue component that displays collection items in a table with sorting, filtering, and pagination.

Component: CroutonTable.vue

Customization: Use #column-[name] slots to override columns

See also: Tables

Type Safety

TypeScript feature that catches errors at compile-time. Nuxt Crouton generates TypeScript types for all collections.

Example:

import type { Product } from '~/layers/products/types/products'
const { items } = await useCollectionQuery<Product>('products')
// items is typed as Product[]

See also: TypeScript Types

V

Validation

Checking data against rules before saving. Nuxt Crouton uses Zod for schema validation.

Example:

import { z } from 'zod'

const schema = z.object({
  title: z.string().min(1, 'Required'),
  price: z.number().min(0, 'Must be positive')
})

See also: Forms

Y

YAML

Human-readable data format used for collection schemas.

Example:

name: products
description: Product catalog
fields:
  - name: title
    type: text
    required: true

External: YAML Syntax Guide

See also: Schema Format

Related Resources

Frequently Asked Questions

Common questions and answers about Nuxt Crouton