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.