🚀 Supercharge Your Nuxt Development

Nuxt for Raycast is the ultimate productivity booster for Nuxt developers. Access documentation, explore the entire Nuxt ecosystem, and enhance your development workflow without ever leaving your editor.

✨ Why You'll Love This Extension

• Instant Access: Get answers, documentation, and code examples in seconds
• Seamless Integration: Works directly within your development environment
• Comprehensive Coverage: Supports the entire Nuxt ecosystem, not just UI components
• Time-Saving: Eliminate context switching and stay in your flow state
• AI-Powered: Use natural language to get exactly what you need

⚡️ Powerful Features

🔮 @nuxt Command (Raycast AI)

Use the @nuxt agent inside Raycast AI Chat:

• Ask questions in natural language about any Nuxt topic
• Generate minimal component snippets
• Get instant documentation and usage examples
• Explore modules and their capabilities
• Solve common Nuxt development challenges

📊 Nuxt Dev Server Monitor (Menu Bar)

Stay connected to your development environment:

• Real-time Detection: Automatically detects running Nuxt servers on ports 3000-3010
• Project Information: View project name, version, memory, and CPU usage
• Quick Actions:
  • Open in browser
  • Open GitHub repository
  • Stop server
  • Create files instantly (Component, Page, API Route, Composable)
• Direct Shortcuts: Access Nuxt docs, components, and modules search
• Smart Indicator: Shows server count with Nuxt logo in menu bar
• Auto-refreshes every 30 seconds

⚡ Quick Create Command

Boost your productivity with instant file generation:

• Standalone Command: Access from Raycast or from the menu bar
• Smart Templates: Pre-configured for Nuxt best practices
  • Components
  • Pages
  • API Routes
  • Composables
  • Layouts
• Custom Templates Registry: Create and use your own templates
  • Configure a templates directory in preferences
  • Add multiple templates per file type (e.g., ColorMode.vue, Button.vue)
  • Selecting a custom template auto-fills the file name
  • Override default templates with your own default.vue/default.ts
• Naming Conventions: Automatic PascalCase/kebab-case conversion
• File Picker: Easy project directory selection
• Context-Aware: Pre-fills path when launched from menu bar

Custom Templates Structure

~/my-nuxt-templates/
├── components/
│   ├── default.vue      # Replaces the default component template
│   ├── ColorMode.vue    # Custom "ColorMode" template
│   └── Button.vue       # Custom "Button" template
├── pages/
│   └── default.vue
├── api/
│   └── default.ts
├── layouts/
│   └── default.vue
└── composables/
    └── default.ts

📚 Nuxt Documentation Browser

• Command: "Nuxt Documentation" (view)
• Browse official docs by section (Get Started, Guide, API, Examples, Community)
• Search titles and paths, including deep entries (e.g., WASM, JSX)
• Copy Markdown: Right-click to copy raw markdown source (Cmd+.)
• Opens pages using Nuxt 4.x documentation

🧩 Nuxt Modules Explorer

Discover and learn about the vast Nuxt ecosystem:

• Browse modules by category (UI, CMS, SEO, etc.)
• Get detailed information about specific modules
• Explore compatibility, maintainers, and documentation
• Find the perfect module for your specific needs

🎨 Nuxt UI Integration

Access Nuxt UI documentation and tools instantly:

• Search Component Theme: Jump directly to any component's theme section
• Search Components: Browse all components and open their docs/theme
• Copy Markdown: Right-click to copy component documentation source (Cmd+.)
• Preview components and their variations
• Pre-configured for Nuxt UI v4

⚙️ Smart Configuration

Customize to match your workflow (Preferences in Raycast):

• Prefix for component names (default: U)
• Custom Templates Directory for Quick Create custom templates

The extension is pre-configured to work with Nuxt UI v4 and Nuxt 4.x documentation.

🎬 See It In Action

I recommend setting up a shortcut like ✦ + N or ⌘ + N for quick access.

🔥 Real-World Use Cases

• Quick File Generation: Create a new page with SEO metadata in seconds from the menu bar
• Server Monitoring: Track your dev server's memory and CPU usage in real-time
• Rapid Prototyping: Generate components, pages, and API routes with pre-configured templates
• Component Development: "Create a responsive navigation bar with dropdown menus"
• Module Discovery: "Find the best SEO modules for my Nuxt project"
• Troubleshooting: "Why isn't my Nuxt data fetching working?"
• Learning: "Show me examples of using Nuxt composables"
• Theme Customization: "Open the theme for button and show variants"
• Documentation Access: Copy markdown sources to include in your own docs

👥 Contributing

Got ideas to make this even better? Issues and PRs are welcome!

Sponsors

Contributors

Made by community 💛

---

🤖 auto updated with automd (last updated: Tue May 06 2025)