nuxt-modules
onmax/nuxt-skills
Create, test, and publish Nuxt modules with defineNuxtModule patterns, Kit utilities, and CI/CD automation.
What is nuxt-modules?
Skill for building Nuxt modules that extend framework functionality through published npm packages, local project modules, or runtime/server extensions. Use when developing reusable module features, setting up E2E tests, or automating module releases and CI/CD workflows.
- Define and structure Nuxt modules using defineNuxtModule and Kit utilities
- Create runtime extensions (components, composables, plugins) injected into user apps
- Build server extensions (API routes, middleware) for backend functionality
- Write and run E2E tests for module behavior in fixtures
- Publish modules to npm with @nuxtjs/ or nuxt- naming conventions
- Set up CI/CD workflows for automated testing and releases
How to install nuxt-modules
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-modules- Node.js and npm installed
- Basic Nuxt and Vue knowledge
- Understanding of module anatomy and defineNuxtModule pattern
How to use nuxt-modules
- 1.Run npx nuxi init -t module my-module to scaffold a new module
- 2.Review references/development.md for module structure and Kit utilities
- 3.Implement module features in src/module.ts and src/runtime/
- 4.Use the playground/ directory to test module functionality locally
- 5.Load references/testing-and-publishing.md to write E2E tests
- 6.Use references/ci-workflows.md templates to set up automated workflows
- 7.Run npm run test to validate module behavior
- 8.Publish to npm following best practices from testing-and-publishing.md
Use cases
- Building a reusable UI component library as a published Nuxt module
- Creating a local project module in modules/ directory for app-specific extensions
- Developing a Nuxt module that adds authentication or API integration features
- Setting up automated testing and publishing pipelines for module releases
- Extending Nuxt with custom server middleware or API route handlers
- Nuxt framework developers
- Module authors publishing to npm
- Teams building reusable framework extensions
- Developers setting up module CI/CD pipelines
nuxt-modules FAQ
Published modules are distributed via npm with @nuxtjs/ or nuxt- naming. Local modules live in a project's modules/ directory for project-specific extensions. Inline modules are simple one-off hooks defined directly in nuxt.config.ts.
Place them in src/runtime/ subdirectories (components/, composables/, plugins/). These are automatically injected into the user's app when the module is installed.
Use the playground/ directory for manual testing and test/fixtures/ for E2E tests. Run npm run dev to start the playground and npm run test to run automated tests.
The references/ci-workflows.md file provides copy-paste templates for automated testing, linting, and publishing workflows.
Yes, Nuxt Kit provides utilities for module development. See references/development.md for Kit utilities and hooks available for your module.
Full instructions (SKILL.md)
Source of truth, from onmax/nuxt-skills.
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
Loading Files
Consider loading these reference files based on your task:
- references/development.md - if building module features, using defineNuxtModule, or working with Kit utilities
- references/testing-and-publishing.md - if writing E2E tests, publishing to npm, or following best practices
- references/ci-workflows.md - if setting up CI/CD workflows for your module
DO NOT load all files at once. Load only what's relevant to your current task.
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
Resources
Related skills
More from onmax/nuxt-skills and the wider catalog.
nuxt-seo
Nuxt SEO meta-module for robots.txt, sitemaps, OG images, and structured data.
nuxt-studio
Use when working with Nuxt Studio, the self-hosted open-source CMS for Nuxt Content sites - provides visual editing, media management, Git-based publishing, auth providers, and AI content assistance
nuxt-ui
Build styled UI with @nuxt/ui v4 components, forms, tables, modals, and Tailwind Variants theming.
nuxthub
Full-stack Nuxt with Drizzle ORM database, KV storage, blob uploads, and cache—multi-cloud ready.
pnpm
Manage Node.js dependencies with pnpm—monorepos, workspaces, catalogs, and supply chain security.
reka-ui
Unstyled, accessible Vue 3 component primitives with WAI-ARIA compliance and composition patterns.