# vuejs-development

A skill that gives your coding agent a Vue 3 reference: reactivity, Composition API, single-file components and directives. Useful when building an SPA or moving off the Options API.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 509 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/vuejs-development/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/vuejs-development

## What it does

The skill is built on the official Vue.js documentation and walks through the reactivity system, the Composition API, single-file components, directives and lifecycle hooks. Inside are JavaScript examples: `ref()` and `reactive()`, computed properties, `watch` and `watchEffect`, components written with and without `<script setup>`.

There is a section on picking between `ref()` and `reactive()` — the first for primitives and single values, the second for objects with several fields. You also get samples for `defineProps`, `defineEmits` and `onMounted`. These are patterns the agent drops into your code, not a package you wire into the project.

The skill points at the `/vuejs/docs` library in Context7, so answers come from current Vue documentation. Install it with one `npx skills add` command, or `gh skill install` for GitHub Copilot. No API keys or extra dependencies are involved in setting it up.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vuejs-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vuejs-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vuejs-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vuejs-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace vuejs-development
```

2. **Manually: put the files in place**
- File: `.github/skills/vuejs-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/vuejs-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vuejs-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill vuejs-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/vuejs-development/SKILL.md

## When to use it
- decide between `ref()` and `reactive()` for a given value
- convert an Options API component to `<script setup>`
- write a computed property with a getter and a setter
- track a nested field with `watch` and `deep`
- build a single-file component with a task list

## Example prompts
- Rewrite this component using the Composition API and `<script setup>`
- Why isn't this reactive value updating? Point out where `.value` is missing
- Add a `fullName` computed property with a getter and a setter

## Similar
- [vue](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-vue.md) — skill · 381 installs
- [vuejs-typescript-best-practices](https://affpapa.org/en/nevibecode/skills/vuejs-typescript-best-practices.md) — skill · 1000 installs
- [vuetify0](https://affpapa.org/en/nevibecode/skills/vuetify0.md) — skill · 721 installs
- [web-development](https://affpapa.org/en/nevibecode/skills/web-development.md) — skill · 1800 installs
- [Expert Vue.js Frontend Engineer](https://affpapa.org/en/nevibecode/agents/expert-vuejs-frontend-engineer.md) — subagent · ★ 40451
- [vue3](https://affpapa.org/en/nevibecode/rules/vue3.md) — rule · ★ 3579

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 65 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md