vue-best-practices
An agent skill by antfu, from antfu/skills. Tags: javascript, vite, vue.
What it does
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add antfu/skills --skill vue-best-practicesOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/antfu/skills
cp -r skills/skills/vue-best-practices ~/.claude/skills/vue-best-practicesSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- antfu/skills (all skills from this repository)
- Path
- skills/vue-best-practices/SKILL.md
- Branch
- main
- Updated
- 2026-09-22
Related skills
- antfu — Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
- antfu-design — antfu-style design conventions, broadened.
- nitro — Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere.
- nuxt — Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing.
- pinia — Pinia official Vue state management library, type-safe and extensible.
- pnpm — Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml.