Future Features
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.
Schema Validation
Before generating code, Nuxt Crouton could validate your schema file and provide helpful error messages to catch common mistakes early.
What It Would Do
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.
Benefits
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.
Form Area Layouts
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.
What It Would Do
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>
Configuration
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'
}
}
})
Benefits
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.
TypeScript Config Support
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.
What It Would Do
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 '@friendlyinternet/nuxt-crouton-collection-generator'
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
Benefits
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.
Automatic Optimistic Updates
Currently optimistic updates require manual implementation. This feature would add an optimistic: true option to useCollectionMutation that handles optimistic updates automatically.
What It Would Do
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>
How It Would Work
The composable would:
- Find the item in the current cache
- Apply the optimistic update to the UI
- Send the API request
- On success: cache refresh happens normally
- On failure: rollback the optimistic change and show error
Benefits
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.
Vote on Features
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:
- Open an issue on GitHub describing your use case
- Share which features would help you most and why
- Suggest improvements or alternative approaches
- Contribute pull requests if you want to help implement
The roadmap evolves based on real-world needs, so your input matters.