Installation

Here's how to install and configure Nuxt Crouton in your Nuxt 4 project.

Prerequisites

You'll need Node.js 18 or 20+, pnpm (recommended) or npm, Nuxt 4.x, and Nuxt UI 4.x.

Install Nuxt Crouton

# Install main module
pnpm add @fyit/crouton

# Install generator (dev dependency)
pnpm add -D @fyit/crouton-cli

Configure Nuxt

Add Nuxt Crouton to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@fyit/crouton'],

  // Optional: Enable additional features
  crouton: {
    // Core features (enabled by default)
    auth: true,
    admin: true,
    i18n: true,

    // Optional features (enable as needed)
    editor: false,     // Rich text editing
    assets: false,     // Asset management
    ai: false,         // AI integration
    email: false,      // Email templates
    pages: false,      // CMS pages
    // ... see Package Architecture for all options
  },

  // Recommended: Enable hot reload for development
  vite: {
    server: {
      watch: {
        ignored: ['!**/node_modules/@fyit/**']
      }
    },
    optimizeDeps: {
      exclude: ['@fyit/crouton']
    }
  }
})

Configure Tailwind CSS

Nuxt Crouton layers use Tailwind CSS classes that need to be scanned by the Tailwind compiler. Due to how Tailwind CSS v4 works with Nuxt Layers, you need to add the @source directive to your app's CSS file to ensure layer components are properly styled.

Automatic Setup (Recommended)

When you run the generator or installer, it will:

1. Detect your existing CSS file (or create app/assets/css/main.css)
2. Add the required @source directive automatically
3. Update nuxt.config.ts if a new CSS file was created

# The generator sets up CSS automatically
npx crouton-generate <layer> <collection> --fields-file=./schema.json

Manual Setup

If automatic setup fails or you prefer manual configuration, create or update your main CSS file (e.g., app/assets/css/main.css):

@import "tailwindcss";
@import "@nuxt/ui";

/* Scan Nuxt Crouton layers - REQUIRED for proper styling */
@source "../../../node_modules/@fyit/crouton*/app/**/*.{vue,js,ts}";

For Multiple Layers

The wildcard pattern @fyit/crouton*/ automatically scans all installed Nuxt Crouton layers:

• @fyit/crouton
• @fyit/crouton-i18n
• @fyit/crouton-editor
• @fyit/crouton-assets

Alternatively, you can list each layer explicitly:

@source "../../../node_modules/@fyit/crouton/app/**/*.{vue,js,ts}";
@source "../../../node_modules/@fyit/crouton-i18n/app/**/*.{vue,js,ts}";
@source "../../../node_modules/@fyit/crouton-editor/app/**/*.{vue,js,ts}";

Verify Installation

Check that the generator is installed correctly:

npx crouton-generate --help

You should see:

Usage: crouton-generate <layer> <collection> [options]

Pre-Generation Checklist

Before running the generator, ensure you've completed these steps:

pnpm add @fyit/crouton
pnpm add -D @fyit/crouton-cli

modules: ['@fyit/crouton']

npx crouton-generate <layer> <collection> --fields-file=./schema.json

Next Steps

Now that Nuxt Crouton is installed, continue to Usage to generate your first collection.