0101-nuxt-components
CommunityStandardize Nuxt component patterns fast
Software Engineering#vue#nuxt#ui-patterns#composition-api#script-setup#component-architecture#typed-props-emits
AuthorMrJmpl3
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves the problem of inconsistent Vue/Nuxt component structure that slows development and causes bugs when teams implement Composition API components without a shared convention.
Core Features & Use Cases
- Script setup order convention: Enforces a consistent ordering of imports, props/emits, composables, injections, refs, state, computed values, queries, builders, watchers, methods, real-time listeners, provides, and lifecycles to reduce cognitive load.
- Directory structure for scalable components: Organizes components by UI pattern (Common, Detail, Form, Modals, Nav, Slideovers, TabSections, Tables) so related pieces stay discoverable as the codebase grows.
- Reusable UI pattern implementations: Provides clear example blueprints for slideovers, modals, tables, and detail components, including typed props/emits and template ref usage.
Quick Start
Use the 0101-nuxt-components skill to generate a new Nuxt component folder and follow the specified <script setup> ordering and pattern-based directory placement.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: 0101-nuxt-components Download link: https://github.com/MrJmpl3/codex_____data_____configuration/archive/main.zip#0101-nuxt-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.