These are features and enhancements being considered for future releases of Nuxt Crouton. They're not promised or scheduled, but represent areas we're exploring based on user feedback and our vision for the project.
Before generating code, Nuxt Crouton could validate your schema file and provide helpful error messages to catch common mistakes early.
The generator would check your schema file for common issues like singular collection names, missing required fields, invalid types, or conflicting field names. Instead of generating broken code or failing silently, you'd get clear, actionable error messages before any files are created.
npx crouton-generate shop product --fields-file product-schema.json
❌ Schema validation failed:
1. Collection name should be plural: 'product' → 'products'
2. Field 'price' is missing a type
3. Field 'description' has invalid type 'longtext' (use 'text' instead)
4. Field 'id' is reserved and will be auto-generated
Run with --skip-validation to bypass these checks.
You'd catch errors before generating files, learn best practices through helpful error messages, and avoid regenerating code due to schema mistakes. The validation would be smart but not restrictive—you could skip it when you know what you're doing.
The area metadata in schema files currently exists as infrastructure for the future. This feature would transform it into actual layout options, letting you organize forms into tabs, columns, or sections without writing custom layouts.
When you define areas in your schema, the generated form would automatically organize fields into the layout you specify. You could choose from different layout modes like tabs, columns, or sections.
// Schema with areas
[
{ "name": "title", "type": "string", "meta": { "area": "main" } },
{ "name": "content", "type": "text", "meta": { "area": "main" } },
{ "name": "status", "type": "string", "meta": { "area": "sidebar" } },
{ "name": "publishedAt", "type": "date", "meta": { "area": "meta" } }
]
<!-- Generated form with layout -->
<template>
<UForm :state="state" :schema="schema" @submit="handleSubmit">
<!-- Two-column layout -->
<div class="grid grid-cols-3 gap-6">
<!-- Main content area (2/3 width) -->
<div class="col-span-2 space-y-4">
<UFormField label="Title" name="title">
<UInput v-model="state.title" />
</UFormField>
<UFormField label="Content" name="content">
<UTextarea v-model="state.content" />
</UFormField>
</div>
<!-- Sidebar area (1/3 width) -->
<div class="space-y-4">
<UFormField label="Status" name="status">
<USelectMenu v-model="state.status" />
</UFormField>
<UFormField label="Published At" name="publishedAt">
<UInput v-model="state.publishedAt" type="date" />
</UFormField>
</div>
</div>
</UForm>
</template>
Or with tabs:
<!-- Generated form with tabs -->
<template>
<UForm :state="state" :schema="schema" @submit="handleSubmit">
<UTabs :items="[
{ label: 'Content', key: 'main' },
{ label: 'Settings', key: 'sidebar' },
{ label: 'SEO', key: 'meta' }
]">
<template #main>
<!-- Main area fields -->
</template>
<template #sidebar>
<!-- Sidebar area fields -->
</template>
<template #meta>
<!-- Meta area fields -->
</template>
</UTabs>
</UForm>
</template>
You could configure the layout mode in app.config.ts:
export default defineAppConfig({
croutonCollections: {
blogPosts: {
name: 'blogPosts',
layer: 'blog',
componentName: 'BlogPostsForm',
apiPath: 'blog-posts',
formLayout: 'columns' // or 'tabs' or 'sections'
}
}
})
This would differentiate Nuxt Crouton from simpler generators by offering professional form layouts out of the box. You'd get better UX without writing custom layout code, and could still customize the generated layout since it's your code.
Currently the multi-collection configuration file uses JavaScript (crouton.config.js). TypeScript support would provide autocomplete, type checking, and better developer experience when configuring multiple collections.
You could use crouton.config.ts instead of the JavaScript version and get full type safety with autocomplete in your editor.
// crouton.config.ts
import type { CroutonConfig } from '@fyit/crouton-cli'
export default {
collections: [
{
name: 'products',
fieldsFile: './schemas/product-schema.json'
// Autocomplete shows available options
// Type checking catches invalid configurations
},
{
name: 'categories',
fieldsFile: './schemas/category-schema.json'
},
],
targets: [
{
layer: 'shop',
collections: ['products', 'categories']
// Type error if collection name doesn't exist
}
],
dialect: 'sqlite', // Autocomplete: 'sqlite' | 'postgres' | 'mysql'
flags: {
force: false,
noTranslations: false,
noDb: false
}
} satisfies CroutonConfig
You'd catch configuration errors before running the generator, get autocomplete for all available options, and have better documentation right in your editor. The TypeScript types would also serve as living documentation for the config format.
Currently optimistic updates require manual implementation. This feature would add an optimistic: true option to useCollectionMutation that handles optimistic updates automatically.
When you enable optimistic updates, mutations would immediately update the UI before the API call completes, then automatically rollback if the call fails.
<script setup lang="ts">
const { items } = await useCollectionQuery('shopProducts')
// With automatic optimistic updates
const { update } = useCollectionMutation('shopProducts', {
optimistic: true // Enable automatic optimistic updates
})
const toggleFeatured = async (product: Product) => {
// UI updates immediately
// Automatically rolls back if API fails
await update(product.id, {
featured: !product.featured
})
}
</script>
<template>
<div v-for="product in items" :key="product.id">
<UButton
:variant="product.featured ? 'solid' : 'outline'"
@click="toggleFeatured(product)"
>
{{ product.featured ? '★' : '☆' }}
</UButton>
</div>
</template>
The composable would:
You'd get instant UI feedback without manual optimistic update code, automatic rollback on errors, and consistent behavior across all mutations. This would make apps feel much faster and more responsive with minimal code.
These features are under consideration, and your feedback helps prioritize them. If any of these would significantly improve your workflow, or if you have other ideas, we'd love to hear from you.
How to Provide Feedback:
The roadmap evolves based on real-world needs, so your input matters.