nuxt-modules

Guide developers in creating, publishing, and maintaining Nuxt modules with Nuxt Kit.

78|8|Updated Nov 7, 2022
One-click install
npx skills add https://github.com/incubrain/foundry --skill nuxt-modules
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-modules
Source: https://github.com/incubrain/foundry/tree/main/.claude/skills/nuxt-modules
Command: npx skills add https://github.com/incubrain/foundry --skill nuxt-modules

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers adopt a structured approach to building Nuxt modules, covering published npm modules, local project modules, runtime extensions, server extensions, release automation, and CI/CD integration.

Core Features & Use Cases

  • Module patterns: guidance for creating Published npm modules (@nuxtjs/, nuxt-), Local modules (modules/), and Inline/runtime extensions (components, composables, plugins).
  • Server & runtime extensions: instructions for integrating API routes, middleware, and runtime components into Nuxt projects.
  • Publishing & CI/CD: best practices for releasing modules to npm and wiring up CI workflows with Nuxt Kit.
  • Use cases: scaffold a new module and wire it into a Nuxt app via nuxt.config.ts, then publish or test in a playground.

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

Frequently Asked Questions about nuxt-modules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Nuxt module from scratch?

To create a Nuxt module, use the Nuxt Kit and defineNuxtModule pattern to scaffold the structure. Initialize a new project using the nuxi module template, then wire it into your app via nuxt.config.ts.

What is the difference between published npm modules and local Nuxt modules?

Published npm modules are distributed via npm with prefixes like @nuxtjs/ or nuxt-, while local Nuxt modules reside in your project's modules/ directory. Both use Nuxt Kit tooling and defineNuxtModule patterns.

How do I add API routes and middleware to a Nuxt module?

You add API routes and middleware to a Nuxt module by implementing server extensions. This integrates runtime components and server-side logic into your Nuxt project using Nuxt Kit utilities.

What's the best way to test and release a Nuxt module?

The best way to test and release a Nuxt module is combining E2E testing with CI/CD release automation. Build in watch mode, run tests in a playground environment, and automate npm publishing.

Can I use inline runtime extensions instead of creating a full Nuxt module?

Yes, you can use inline runtime extensions to inject components, composables, and plugins directly without a full module. This provides a lightweight alternative for simpler project integrations.