Nuxt Boost

The Nuxt equivalent of Laravel Boost - Accelerate AI-assisted development with essential context and structure for generating high-quality, Nuxt-specific code.

Nuxt Boost is directly inspired by Laravel Boost and provides the same powerful AI development experience for the Nuxt.js ecosystem.

Features

Just like Laravel Boost, but for Nuxt:

• 🚀 AI-Enhanced Development - Provides structured context for AI assistants (like Laravel Boost's .blade.php guidelines)
• 🛠️ MCP Server Integration - Full Model Context Protocol support for seamless AI tool integration
• 📊 Development Tools - Built-in devtools component for real-time application inspection
• 🪵 Browser Logging - Capture and forward browser console logs to server (identical to Laravel Boost)
• 📡 Real-time Monitoring - Monitor routes, components, modules, and configuration via API endpoints
• 🔧 Vue Composables - useBoost() and useBoostLogger() for easy integration
• ⚡ CLI Commands - nuxi boost:install, boost:info, boost:list (equivalent to Laravel Artisan commands)
• 🤖 AI Guidelines - Automatic .ai/ directory creation with comprehensive development guidelines

Installation

Add @farsi/nuxt-boost to your project:

# Using npm
npm install --save-dev @farsi/nuxt-boost

# Using yarn
yarn add --dev @farsi/nuxt-boost

# Using pnpm
pnpm add -D @farsi/nuxt-boost

Quick Setup

Run the installation command to automatically configure Nuxt Boost:

# Using npx
npx nuxt-boost install

# Using nuxi (after installation)
nuxi boost:install

# Or using npx directly
npx @farsi/nuxt-boost install

This command does exactly what Laravel Boost's php artisan boost:install does:

• ✅ Add @farsi/nuxt-boost to your nuxt.config.ts modules
• ✅ Create the .ai/ directory with comprehensive AI development guidelines
• ✅ Set up the boost/ directory for project-specific custom guidelines
• ✅ Automatically add .ai to your .gitignore file (if it exists)
• ✅ Configure sensible default options for development
• ✅ Detect your package manager (npm/yarn/pnpm/bun) automatically

Setup

Add @farsi/nuxt-boost to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@farsi/nuxt-boost'
  ],
  boost: {
    // Module options
    dev: true,                    // Enable in development
    mcp: true,                   // Enable MCP server
    browserLogging: true,        // Enable browser log forwarding
    guidelinesPath: 'boost'      // Path for AI guidelines
  }
})

Usage

Browser Logging

Nuxt Boost automatically captures browser console logs and forwards them to your server console for easier debugging:

// These will appear in your server console
console.log('Debug information')
console.error('Error details')
console.warn('Warning message')

Using Composables

useBoost()

Access application information and MCP functionality:

<script setup>
const { getInfo, getRoutes, getComponents, sendMCPRequest } = useBoost()

// Get application information
const info = await getInfo()

// Get route information
const routes = await getRoutes()

// Get component information
const components = await getComponents()

// Send MCP request
const result = await sendMCPRequest('nuxt:info')
</script>

useBoostLogger()

Enhanced logging with server forwarding:

<script setup>
const logger = useBoostLogger()

// Log messages that will be forwarded to server
await logger.info('Application started')
await logger.warn('Performance warning')
await logger.error('Critical error', { context: 'user-action' })
</script>

DevTools Component

The BoostDevtools component provides a floating panel for inspecting your application:

<template>
  <div>
    <!-- Your app content -->

    <!-- DevTools panel (only in development) -->
    <BoostDevtools v-if="$config.public.dev" />
  </div>
</template>

MCP Server Integration

Just like Laravel Boost's MCP server, Nuxt Boost includes a complete MCP (Model Context Protocol) server that provides AI assistants with structured access to your Nuxt application. The server exposes endpoints for:

• Application information (/api/_boost/info) - Like Laravel Boost's app info
• Route discovery (/api/_boost/routes) - Equivalent to Laravel's route listing
• Component inspection (/api/_boost/components) - Similar to Laravel's view discovery
• Log aggregation (/api/_boost/logs) - Browser log forwarding (identical to Laravel Boost)
• MCP protocol (/api/_boost/mcp) - Full MCP server implementation

Available MCP Tools

Nuxt Boost provides the same MCP tools as Laravel Boost, adapted for Nuxt:

• nuxt:info - Get application metadata and configuration (like Laravel's app:info)
• nuxt:routes - List all application routes (like Laravel's route:list)
• nuxt:components - Get component information (like Laravel's view discovery)
• nuxt:modules - List installed modules (like Laravel's package discovery)
• nuxt:plugins - Get plugin information
• nuxt:config - Access sanitized configuration
• nuxt:logs - Access aggregated logs (identical to Laravel Boost)

CLI Commands

Nuxt Boost provides CLI commands that mirror Laravel Boost's Artisan commands:

| Laravel Boost | Nuxt Boost | Description | |---------------|------------|-------------| | php artisan boost:install | nuxi boost:install | Auto-setup and configuration | | php artisan boost:info | nuxi boost:info | Display application information | | php artisan boost:list | nuxi boost:list | List routes, components, modules |

boost:install

Equivalent to Laravel Boost's installation command:

nuxi boost:install [options]

Options:
  --force              Force reinstallation (like Laravel's --force)
  --skip-config        Skip nuxt.config.ts modification
  --skip-guidelines    Skip AI guidelines creation

boost:info

Display comprehensive project information (like Laravel's php artisan about):

nuxi boost:info [options]

Options:
  --json              Output as JSON (same as Laravel Boost)

boost:list

List application components (like Laravel's various list commands):

nuxi boost:list [type] [options]

Arguments:
  type                Type to list: routes, components, modules, plugins, or all (default)

Options:
  --json              Output as JSON

Examples:

# List everything
nuxi boost:list

# List only routes
nuxi boost:list routes

# List components as JSON
nuxi boost:list components --json

Configuration

export interface ModuleOptions {
  /**
   * Enable development mode
   * @default true
   */
  dev?: boolean

  /**
   * Enable MCP server
   * @default true
   */
  mcp?: boolean

  /**
   * Custom AI guidelines path
   * @default 'boost'
   */
  guidelinesPath?: string

  /**
   * Browser logging
   * @default true
   */
  browserLogging?: boolean
}

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the module
npm run build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Laravel Boost Comparison

Nuxt Boost is designed to be the exact equivalent of Laravel Boost for the Nuxt.js ecosystem:

| Feature | Laravel Boost | Nuxt Boost | |---------|---------------|------------| | Installation | composer require --dev laravel/boost | npm install --dev @farsi/nuxt-boost | | Setup Command | php artisan boost:install | nuxi boost:install | | Framework Integration | Service Provider | Nuxt Module | | Browser Logging | ✅ Identical implementation | ✅ Identical implementation | | MCP Server | ✅ Full MCP support | ✅ Full MCP support | | AI Guidelines | .blade.php files | .ai/*.md files | | CLI Commands | Artisan commands | Nuxi commands | | Development Only | ✅ Environment aware | ✅ Environment aware | | Configuration | config/boost.php | nuxt.config.ts boost key |

Why Nuxt Boost?

If you love Laravel Boost and work with Nuxt.js, Nuxt Boost gives you the exact same powerful AI development experience:

• 🎯 Same Developer Experience - Familiar commands and workflows
• 🤖 Same AI Integration - MCP protocol and structured context
• 📊 Same Introspection - Real-time application analysis
• 🪵 Same Logging - Browser-to-server log forwarding
• ⚡ Same CLI - Command equivalency with Laravel Boost

Contributing

Contributions are welcome! This project aims to maintain feature parity with Laravel Boost while adapting to Nuxt.js patterns.

License

MIT License © 2024