nuxt-modules
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.
When & Why to Use This Skill
This Claude skill streamlines the end-to-end process of Nuxt module development, offering expert guidance on creating, testing, and publishing both local and npm-ready modules. It leverages Nuxt Kit utilities and best practices to help developers extend framework functionality through runtime extensions, server middleware, and automated CI/CD workflows.
Use Cases
- Developing and publishing reusable Nuxt modules to the npm registry using standardized @nuxtjs/ or nuxt- patterns.
- Creating local project-specific modules within the 'modules/' directory to encapsulate complex business logic and maintain a clean architecture.
- Extending Nuxt runtime capabilities by injecting custom components, composables, and plugins into the user's application.
- Building server-side extensions including custom API routes and middleware using the Nitro engine.
- Setting up robust E2E testing environments and automated CI/CD pipelines for seamless module maintenance and release automation.
| name | nuxt-modules |
|---|---|
| description | "Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation." |
| license | MIT |
Nuxt Module Development
Guide for creating Nuxt modules that extend framework functionality.
Related skills: nuxt (basics), vue (runtime patterns)
Quick Start
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev # Start playground
npm run dev:build # Build in watch mode
npm run test # Run tests
Available Guidance
- references/development.md - Module anatomy, defineNuxtModule, Kit utilities, hooks
- references/testing-and-publishing.md - E2E testing, best practices, releasing, publishing
- references/ci-workflows.md - Copy-paste CI/CD workflow templates
Load based on context:
- Building module features? → references/development.md
- Testing or publishing? → references/testing-and-publishing.md
- CI workflow templates? → references/ci-workflows.md
Module Types
| Type | Location | Use Case |
|---|---|---|
| Published | npm package | @nuxtjs/, nuxt- distribution |
| Local | modules/ dir |
Project-specific extensions |
| Inline | nuxt.config.ts |
Simple one-off hooks |
Project Structure
my-module/
├── src/
│ ├── module.ts # Entry point
│ └── runtime/ # Injected into user's app
│ ├── components/
│ ├── composables/
│ ├── plugins/
│ └── server/
├── playground/ # Dev testing
└── test/fixtures/ # E2E tests