feat: Add comprehensive Nuxt 4 support

sem · sem · commit 44dd31745e95 · 2025-08-20T09:35:55.000-05:00
- Added Nuxt 4 as frontend framework option in techStack prompts - Created nuxt4.md template with Vue 3 and new app/ directory structure - Added Nuxt 4 validation commands (typecheck, build, dev, lint) - Updated README with Nuxt 4 features and examples - Enhanced project structure generator for Nuxt 4 - Version bump to v3.2.9 Fixes #7
diff --git a/.context-forge/progress.json b/.context-forge/progress.json
@@ -4,14 +4,71 @@
     "command": "init",
     "operation": "Project initialization",
     "status": "in_progress",
+    "projectPath": "/Users/sem/code/context-forge",
     "startTime": "2025-07-27T21:15:20.324Z",
+    "metadata": {
+      "aiEnabled": false,
+      "targetIDEs": [
+        "claude"
+      ]
+    },
+    "steps": []
+  },
+  {
+    "id": "mek1gp9v2iwar373v",
+    "command": "init",
+    "operation": "Project initialization",
+    "status": "in_progress",
     "projectPath": "/Users/sem/code/context-forge",
+    "startTime": "2025-08-20T13:59:05.203Z",
     "metadata": {
       "aiEnabled": false,
       "targetIDEs": [
         "claude"
       ]
     },
     "steps": []
+  },
+  {
+    "id": "mek21bfbzfk371y83",
+    "command": "init",
+    "operation": "Project initialization",
+    "status": "failed",
+    "startTime": "2025-08-20T14:15:07.031Z",
+    "projectPath": "/Users/sem/code/context-forge",
+    "metadata": {
+      "aiEnabled": false,
+      "targetIDEs": [
+        "claude"
+      ],
+      "errors": [
+        "Cannot read properties of undefined (reading 'length')"
+      ]
+    },
+    "steps": [
+      {
+        "id": "mek21bfesc0swil5w",
+        "name": "Load configuration file",
+        "status": "completed",
+        "startTime": "2025-08-20T14:15:07.034Z",
+        "endTime": "2025-08-20T14:15:07.034Z"
+      },
+      {
+        "id": "mek21bfeos1d7wbmn",
+        "name": "Save configuration",
+        "status": "completed",
+        "startTime": "2025-08-20T14:15:07.034Z",
+        "endTime": "2025-08-20T14:15:07.035Z"
+      },
+      {
+        "id": "mek21bffttfrlypp9",
+        "name": "Generate documentation",
+        "status": "completed",
+        "startTime": "2025-08-20T14:15:07.035Z",
+        "endTime": "2025-08-20T14:15:07.062Z"
+      }
+    ],
+    "endTime": "2025-08-20T14:15:07.063Z",
+    "duration": 32
   }
 ]
diff --git a/PRPs/ai_docs/README.md b/PRPs/ai_docs/README.md
@@ -0,0 +1,43 @@
+# AI Documentation Curation
+
+This directory contains curated documentation for AI-assisted development. These docs are referenced in PRPs to provide comprehensive context.
+
+## Purpose
+
+When creating PRPs, you may need to include specific documentation that isn't easily accessible via URLs or is critical for implementation success. This directory serves as a repository for such documentation.
+
+## Usage in PRPs
+
+Reference documents in your PRPs using:
+
+```yaml
+- docfile: PRPs/ai_docs/library-guide.md
+  why: Specific implementation patterns and gotchas
+```
+
+## What to Include
+
+1. **Library Documentation** - Key sections from official docs
+2. **Implementation Patterns** - Common patterns and best practices
+3. **API References** - Detailed API documentation for complex integrations
+4. **Migration Guides** - When upgrading versions or switching libraries
+5. **Internal Standards** - Team-specific coding standards and practices
+
+## File Naming Convention
+
+- Use descriptive names: `react-hooks-guide.md`, `fastapi-async-patterns.md`
+- Include version if relevant: `nextjs-15-app-router.md`
+- Use lowercase with hyphens
+
+## Example Structure
+
+```
+PRPs/ai_docs/
+├── README.md (this file)
+├── react-hooks-guide.md
+├── fastapi-async-patterns.md
+├── postgres-optimization.md
+└── aws-lambda-best-practices.md
+```
+
+Remember: The goal is to provide AI with all necessary context for one-pass implementation success.
diff --git a/README.md b/README.md
@@ -25,14 +25,28 @@
 </p>
 
 <div align="center">
-  <h2>🎉 What's New in v3.2.8</h2>
+  <h2>🎉 What's New in v3.2.9</h2>
   
   <table>
     <tr>
+      <td align="center" width="50%">
+        <h3>🦄 Nuxt 4 Support</h3>
+        <p><strong>NEW: Full Nuxt 4 Integration</strong></p>
+        <p>Complete support for Nuxt 4 with Vue 3 and modern development!</p>
+        <ul align="left">
+          <li>🏗️ New app/ directory structure support</li>
+          <li>⚡ Enhanced TypeScript integration</li>
+          <li>🎯 Vue 3 Composition API guidelines</li>
+          <li>🔄 Auto-imports and server-side rendering</li>
+          <li>📊 Nuxt-specific validation commands</li>
+        </ul>
+        <code>context-forge init</code><br/>
+        <em>Select "Nuxt 4" as frontend framework</em>
+      </td>
       <td align="center" width="50%">
         <h3>🤖 AI-Powered PRP Generation</h3>
-        <p><strong>NEW: <code>context-forge init --ai-prp</code></strong></p>
-        <p>Generate intelligent, feature-specific PRPs with AI!</p>
+        <p><strong>Continued: <code>context-forge init --ai-prp</code></strong></p>
+        <p>Intelligent, feature-specific PRPs with AI enhancement!</p>
         <ul align="left">
           <li>🧠 OpenAI & Anthropic Claude integration</li>
           <li>🔐 Secure API key management with encryption</li>
@@ -42,19 +56,6 @@
         </ul>
         <code>context-forge ai-keys --provider openai</code>
       </td>
-      <td align="center" width="50%">
-        <h3>🔧 Enhanced Core Features</h3>
-        <p><strong>Bug Fixes & Improvements</strong></p>
-        <p>Major improvements to PRP generation and project initialization!</p>
-        <ul align="left">
-          <li>✅ Fixed identical PRP content bug</li>
-          <li>📝 Added config.json file generation</li>
-          <li>🎯 Feature-specific PRP content</li>
-          <li>🔒 Encrypted key storage</li>
-          <li>📊 Progress tracking during generation</li>
-        </ul>
-        <code>context-forge init --ai-prp</code>
-      </td>
     </tr>
   </table>
   
@@ -596,7 +597,40 @@ user-service/
 └── .github/workflows/
 ```
 
-### Example 3: Using Configuration File
+### Example 3: Nuxt 4 Vue Application
+
+```bash
+$ context-forge init --output nuxt-dashboard
+
+? Project name: Analytics Dashboard  
+? Project type: fullstack
+? Project description: Modern analytics dashboard with real-time data
+? Frontend framework: nuxt4  # NEW: Nuxt 4 option
+? Styling framework: tailwind
+? State management: pinia
+? Backend framework: fastapi
+? Database: postgresql
+? Authentication method: jwt
+? Enable AI-powered PRP generation? Yes
+
+Generated structure:
+nuxt-dashboard/
+├── CLAUDE.md              # Nuxt 4 + Vue 3 specific rules
+├── Docs/
+├── PRPs/
+│   ├── nuxt-dashboard-prp.md
+│   └── feature-auth-prp.md  # AI-enhanced for Nuxt 4
+└── .claude/commands/       # 25+ slash commands
+
+✨ Nuxt 4 Features Included:
+- New app/ directory structure documented
+- Vue 3 Composition API guidelines  
+- TypeScript integration with auto-imports
+- SSR and data fetching best practices
+- Pinia state management setup
+```
+
+### Example 4: Using Configuration File
 
 ```bash
 # context-forge.json
@@ -991,6 +1025,7 @@ When you run `context-forge init`, you'll be guided through:
 #### Frontend Frameworks
 
 - **Next.js 15** - App Router, Server Components, React 19
+- **Nuxt 4** - NEW! Vue-based full-stack with enhanced TypeScript support
 - **React** - SPA with TypeScript and modern patterns
 - **Vue.js 3** - Composition API and TypeScript
 - **Angular** - Standalone components, RxJS
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "context-forge",
-  "version": "3.2.8",
+  "version": "3.2.9",
   "description": "AI orchestration platform with autonomous teams, enhancement planning, migration tools, 25+ slash commands, checkpoints & hooks. Multi-IDE: Claude, Cursor, Windsurf, Cline, Copilot",
   "main": "dist/index.js",
   "bin": {
diff --git a/src/cli/prompts/techStack.ts b/src/cli/prompts/techStack.ts
@@ -27,6 +27,7 @@ export async function techStack(projectType: string): Promise<TechStackAnswers>
         message: 'Select your frontend framework:',
         choices: [
           { name: '🚀 Next.js (React-based, full-stack)', value: 'nextjs' },
+          { name: '🦄 Nuxt 4 (Vue-based, full-stack)', value: 'nuxt4' },
           { name: '⚙️  React (SPA)', value: 'react' },
           { name: '💅 Vue.js', value: 'vuejs' },
           { name: '🌶️  Angular', value: 'angular' },
@@ -58,8 +59,8 @@ export async function techStack(projectType: string): Promise<TechStackAnswers>
       ]);
       answers.styling = stylingAnswer.styling;
 
-      // State management for React/Vue/Angular
-      if (['react', 'nextjs', 'vuejs', 'angular'].includes(frontendAnswer.frontend)) {
+      // State management for React/Vue/Angular/Nuxt
+      if (['react', 'nextjs', 'vuejs', 'nuxt4', 'angular'].includes(frontendAnswer.frontend)) {
         console.log(chalk.cyan(`📊 ${stepCounter++}. State Management`));
         const stateAnswer = await inquirer.prompt([
           {
@@ -169,6 +170,14 @@ function getStateManagementChoices(framework: string) {
         { name: 'Pinia', value: 'pinia' },
         { name: 'None', value: 'none' },
       ];
+    case 'nuxt4':
+      return [
+        { name: 'Pinia (Recommended)', value: 'pinia' },
+        { name: 'Vuex (Legacy)', value: 'vuex' },
+        { name: 'useState (Nuxt built-in)', value: 'nuxt-usestate' },
+        { name: 'useCookie (Nuxt built-in)', value: 'nuxt-usecookie' },
+        { name: 'None', value: 'none' },
+      ];
     case 'angular':
       return [
         { name: 'NgRx', value: 'ngrx' },
diff --git a/src/data/validationCommands.ts b/src/data/validationCommands.ts
@@ -48,6 +48,18 @@ export const techStackValidationCommands: Record<string, ValidationCommandSet> =
     coverage: 'vitest --coverage',
   },
 
+  nuxt4: {
+    syntax: ['nuxt typecheck', 'npm run lint'],
+    tests: ['npm run test', 'npm run test:coverage'],
+    build: 'nuxt build',
+    start: 'nuxt dev',
+    typeCheck: 'nuxt typecheck',
+    lint: 'eslint .',
+    format: 'prettier --write "app/**/*.{vue,ts,js}"',
+    coverage: 'vitest --coverage',
+    security: ['npm audit', 'nuxt build --analyze'],
+  },
+
   angular: {
     syntax: ['ng lint', 'ng build --configuration development'],
     tests: ['ng test --no-watch --code-coverage'],
diff --git a/src/generators/claudeMd.ts b/src/generators/claudeMd.ts
@@ -36,6 +36,8 @@ async function selectTemplate(techStack: ProjectConfig['techStack']): Promise<st
   // Priority order for template selection
   if (techStack.frontend === 'nextjs') {
     return 'tech-stacks/nextjs-15.md';
+  } else if (techStack.frontend === 'nuxt4') {
+    return 'tech-stacks/nuxt4.md';
   } else if (techStack.frontend === 'react') {
     return 'tech-stacks/react.md';
   } else if (techStack.frontend === 'vue') {
@@ -73,6 +75,26 @@ function generateProjectStructure(techStack: ProjectConfig['techStack']): string
 └── types/                 # TypeScript types`;
   }
 
+  if (techStack.frontend === 'nuxt4') {
+    return `app/                      # NEW: Nuxt 4 app directory
+├── assets/               # Static assets
+├── components/           # Vue components
+├── composables/          # Vue composables
+├── layouts/              # Layout components
+├── middleware/           # Route middleware
+├── pages/                # File-based routing
+├── plugins/              # Plugins
+├── utils/                # Utility functions
+├── app.vue               # Root component
+├── app.config.ts         # App configuration
+└── error.vue             # Error page
+content/                  # Nuxt Content (optional)
+public/                   # Static files
+server/                   # Server-side code
+shared/                   # Shared utilities
+nuxt.config.ts            # Nuxt configuration`;
+  }
+
   if (techStack.backend === 'fastapi') {
     return `app/
 ├── api/                   # API endpoints
diff --git a/templates/claude/tech-stacks/nuxt4.md b/templates/claude/tech-stacks/nuxt4.md

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "context-forge",`
`3`		`- "version": "3.2.8",`
	`3`	`+ "version": "3.2.9",`
`4`	`4`	`"description": "AI orchestration platform with autonomous teams, enhancement planning, migration tools, 25+ slash commands, checkpoints & hooks. Multi-IDE: Claude, Cursor, Windsurf, Cline, Copilot",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"bin": {`