Nuxt Module Development

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 wor...

onmax/nuxt-skills·2.4Kinstalls717starsFrontend Development

SKILL.md

Full skill instructions

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/onmax/nuxt-skills --skill nuxt-modules

View on GitHub

nuxt-modules

More Frontend Development skills

View all

Frontend Development

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K

View

Frontend Development

vercel-composition-patterns

Vercel's official collection of agent skills

31.9K 374.1K

View

Frontend Development

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Frontend Development

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Frontend Development

shadcn

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.

125.1K 271.7K

View

Frontend Development

vercel-react-native-skills

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules.

31.9K 231.8K

View

Frontend Development

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

31.9K 143K

View

Frontend Development

vercel-react-view-transitions

Native browser animations for React UI state changes using the View Transition API.

31.9K 143K

View

Frontend Development

convex-create-component

Design and build isolated, reusable Convex backend components with clear boundaries and app-facing wrappers.

63 123.5K

View

Frontend Development

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

179.7K 106.4K

View