What is Nuxt Crouton?

Nuxt Crouton is a code generator and composable library that helps you build CRUD (Create, Read, Update, Delete) applications in Nuxt 4. It's built on top of the SuperSaaS starter template, using its opinionated approach to types and CRUD patterns to help you ship production-ready applications faster.

What It Does

Nuxt Crouton generates working CRUD interfaces including list views, forms, TypeScript types, and composables with validation. It also provides optional database migrations and smart data caching built on useFetch. Additional features include modal and slideover management, toast notifications, automatic cache invalidation, translation support, and team-based auth utilities.

What It's Not

Nuxt Crouton is not a runtime admin panel like Strapi or Directus. It's not a framework but rather works within Nuxt. It doesn't replace your database—instead, it generates code that works with your existing database. And while it generates frontend components and backend stubs, it's not a complete backend solution.

Key Principle

The philosophy behind Nuxt Crouton is simple: Generate → Customize → Own. Start by generating 80% of your working code in 30 seconds. Then customize the generated code however you need—it's yours to edit freely. Finally, own and maintain it as part of your codebase.

The Rails Scaffold Approach

If you're familiar with Rails scaffolding, Nuxt Crouton works similarly. Both generate starting code that you own immediately and can customize as needed, while the core framework stays stable and receives updates independently.

# Rails
rails generate scaffold Post title:string body:text

# Nuxt Crouton
npx crouton-generate blog posts --fields-file post-schema.json

Architecture

Nuxt Crouton uses a two-layer architecture that separates your customizable generated code from the stable core library. You can also organize collections by domain using Nuxt layers for better maintainability and reusability.

Learn more about the Architecture and how to structure your application using domain-driven design.

Why SuperSaaS?

Nuxt Crouton is designed to work with SuperSaaS, a starter template that builds on Nuxt, Nuxt UI, and NuxtHub—tools you may already be using. SuperSaaS provides a clean foundation for SaaS applications. It includes team permissions, super admin capabilities, NuxtHub integration, and payment processing—all built in. This means you get an opinionated project structure with best practices, automatic TypeScript type generation, team-based authentication, and Drizzle ORM ready to go.

Nuxt Crouton fills the gap by letting you add CRUD functionality and iterate quickly. But since every project has unique requirements, it takes a scaffolding approach rather than being a framework. You generate the code you need, then customize it completely. The core components (like modal management and data operations) are opt-in, just like the internationalization and Tiptap editor support. Everything works with Nuxt layers for easy composition, giving you the best of both worlds: reusability with complete control.

Next Steps

Ready to get started? Continue to Installation to set up Nuxt Crouton in your project.