Add a marketplace: /plugin marketplace add . Then add the config to /plugin install vue@ . Finally, /plugin in Claude Code.

vue

Q: What is vue best for?

vue is categorized under General. It covers: api, vue, vue3, composition-api, components, composables, reactivity, script-setup.

619Community RegistryGeneralby onmax

Vue 3 Composition API, components, composables. Use when editing .vue files, writing reactive code, or encountering ref, computed, watch, defineProps errors.

First seen 4/17/2026

View Source

Summary

This skill provides expert guidance on Vue 3 Composition API, including components, composables, and reactive patterns.

It helps developers write idiomatic Vue code using ref, computed, watch, and script setup, and troubleshoot common errors like defineProps issues.

Overview

[!WARNING]
This repo may be replaced by nuxt-skill.onmax.me. Stay tuned.

[!TIP]
Debug Vite issues with Vite Doctor.

<img src="https://raw.githubusercontent.com/onmax/nuxt-skills/main/.github/nuxt-skills.webp" alt="Nuxt Skills" width="100%"> Design inspired by <a href="https://github.com/HugoRCD">HugoRCD</a>'s work

Vue, Nuxt, and NuxtHub skills for AI coding assistants.

<a href="https://github.com/nuxt/nuxt/discussions/34059"> 🔗 Related Nuxt RFC: Bundling Agent Skills in Nuxt Modules </a>

Installation

bash

npx skills add onmax/nuxt-skills

The `skills` CLI auto-detects your installed agents and provides an interactive picker. Use -g for global (user-wide) or -y to install all skills.

Works with Claude Code, Cursor, Codex, OpenCode, GitHub Copilot, Antigravity, Roo Code, and more.

Claude Code Marketplace

An alternative for Claude Code users:

bash

# Add marketplace
/plugin marketplace add onmax/nuxt-skills

# Install Nuxt Skills
/plugin install nuxt-skills@nuxt-skills

Claude Code installs Nuxt Skills as one plugin and dynamically discovers all included skill entries.

Manual Installation

Clone the repository and copy skill folders to your agent's skills directory:

Agent	Project path	Global path
Claude Code	`.claude/skills/`	`~/.claude/skills/`
Cursor	`.cursor/skills/`	`~/.cursor/skills/`
Codex	`.codex/skills/`	`~/.codex/skills/`
OpenCode	`.opencode/skill/`	`~/.config/opencode/skill/`
Copilot	`.github/skills/`	—

Skills

Skill	Description
vue	Vue 3 Composition API, components, composables, testing
nuxt	Nuxt 4+ server routes, routing, middleware, config
nuxt-modules	Creating Nuxt modules with defineNuxtModule, Kit utilities, testing
nuxthub	NuxtHub v0.10 database, KV, blob, cache, multi-cloud
nuxt-content	Nuxt Content v3 collections, queries, MDC rendering, NuxtStudio
nuxt-ui	Nuxt UI v4 components, theming, forms, overlays, composables
nuxt-better-auth	Auth with @onmax/nuxt-better-auth, useUserSession, route protection, clientOnly
reka-ui	Reka UI headless Vue components, accessible primitives, props/emits/slots
document-writer	Writing documentation for Nuxt ecosystem - MDC, style, structure, code examples
ts-library	TypeScript library authoring - exports, tsdown, API patterns, type tricks, CI
motion	Motion Vue animations - motion component, composables, scroll, gestures
vueuse	VueUse composables - state, browser, sensors, network, animation utilities
nuxt-seo	Nuxt SEO meta-module - robots, sitemap, og-image, schema-org, site config
vitest	Vitest testing - test API, mocking, coverage, type testing, environments
vite	Vite build tool - config, plugins, HMR, SSR, library mode, performance
pnpm	pnpm package manager - workspaces, catalogs, CLI commands, CI/CD
tsdown	tsdown bundler - TypeScript libraries, DTS generation, package validation
tresjs	TresJS 3D framework - TresCanvas, Cientos helpers, post-processing effects
writing-web-documentation	Write and review developer docs - page types, house style, templates, web-project rules

How Skills Work

Skills follow the Agent Skills open format. They can be activated in two ways:

Auto-discovery — The agent reads each skill's description and loads it when relevant to your task
Manual invocation — Type /skill-name (e.g., /nuxt) to explicitly load a skill

You're working on...	Agent may auto-load...
`.vue` file	`vue` skill
`server/api/` route	`nuxt` skill
`nuxt.config.ts`	`nuxt` skill
NuxtHub storage	`nuxthub` skill
Auth/login/session	`nuxt-better-auth`

Structure

Follows agentskills standard format.

code

nuxt-skills/
├── skills/                 # Skills (agentskills format)
│   ├── vue/
│   │   ├── SKILL.md        # Entry point with frontmatter
│   │   └── references/     # Sub-files loaded on-demand
│   ├── nuxt/
│   ├── nuxt-modules/
│   ├── nuxthub/
│   ├── nuxt-content/
│   ├── nuxt-ui/
│   ├── nuxt-better-auth/
│   ├── reka-ui/
│   ├── document-writer/
│   ├── ts-library/
│   ├── motion/
│   ├── vueuse/
│   ├── nuxt-seo/
│   ├── vitest/
│   ├── vite/
│   ├── pnpm/
│   ├── tsdown/
│   ├── tresjs/
│   └── writing-web-documentation/
└── .claude-plugin/
    ├── plugin.json         # Claude Code plugin manifest
    └── marketplace.json    # Claude Code marketplace

Automated Maintenance

Skills are kept up-to-date via GitHub Actions:

Workflow	Schedule	Purpose
update-skills.yml	Weekly (Monday)	Regenerates reka-ui, nuxt-ui, and vueuse docs from upstream
skill-maintenance.yml	Biweekly (1st & 15th)	Claude analyzes upstream changelogs, creates PRs if updates needed

The maintenance workflow uses claude-code-action to intelligently detect breaking changes, new features, and deprecations from upstream sources.

Resources

•Agent Skills Spec - Open format for extending AI agent capabilities
•Claude Code Skills - Skills in Claude Code
•VS Code Agent Skills - GitHub Copilot skills in VS Code
•GitHub Agent Skills Docs - About agent skills
•OpenCode Skills - Agent skills in OpenCode
•awesome-copilot - Community collection of custom agents and prompts

Acknowledgments

•vue skill gotchas from vuejs-ai/skills vue-best-practices (200+ rules)
•vitest, vite, pnpm, tsdown skills from @antfu's skills

License

MIT

Install & Usage

Add a marketplace

/plugin marketplace add <org/repo>

Install the plugin

Add the configuration to /plugin install vue@<marketplace>

Manage with /plugin

/plugin

Use Cases

Writing a Vue 3 component with Composition API and script setup

Creating a reusable composable for shared state or logic

Debugging reactivity issues with ref, computed, or watch

Migrating an Options API component to Composition API

Defining props and emits with TypeScript in script setup

Optimizing component performance with computed and watchEffect

Usage Examples

/vue Create a Vue 3 component with script setup that fetches data on mount and displays it in a list

/vue Write a composable called useCounter that exposes count, increment, and decrement

/vue Debug this component: the computed property is not updating when the ref changes

View source on GitHub

apivuevue3composition-apicomponentscomposablesreactivityscript-setup

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is vue?

This skill provides expert guidance on Vue 3 Composition API, including components, composables, and reactive patterns. It helps developers write idiomatic Vue code using ref, computed, watch, and script setup, and troubleshoot common errors like defineProps issues.

How to install vue?

To install vue: add a marketplace (/plugin marketplace add <org/repo>), then add the config to /plugin install vue@<marketplace>. Finally, /plugin in Claude Code.

What is vue best for?

vue is a plugin categorized under General. It is designed for: api, vue, vue3, composition-api, components, composables, reactivity, script-setup. Created by onmax.

What can I use vue for?

vue is useful for: Writing a Vue 3 component with Composition API and script setup; Creating a reusable composable for shared state or logic; Debugging reactivity issues with ref, computed, or watch; Migrating an Options API component to Composition API; Defining props and emits with TypeScript in script setup; Optimizing component performance with computed and watchEffect.