vue-best-practices

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.

2,185stars123forksUpdated 4/12/2026

Web Development #code-quality #composition-api #typescript #javascript #frontend-development #vue

Security Assessment

Low Risk(70/100)

Detected risks:

Data Exfiltration([references/updated-hook-performance.md] fetch('/api/sync', { method: 'POST)

Secret Exposure([references/state-management.md] token =)

Security Score70/100

About vue-best-practices

The vue-best-practices skill provides a structured workflow and guidance for developers working with Vue.js projects, ensuring that code adheres to modern best practices and maintainable standards. It emphasizes the use of the Composition API with `<script setup>` and TypeScript, making it suitable for Vue 3 applications, including those using SSR, Volar, vue-tsc, Vue Router, Pinia, and Vite. By enforcing predictable state management, explicit data flow, and component-focused design, this skill helps developers reduce complexity and improve code readability and maintainability in Vue projects.

The skill offers a comprehensive set of guidelines covering core Vue principles such as reactivity, single-file component (SFC) structure, template safety, and proper component decomposition. It includes mandatory references for reactivity, SFC patterns, component data flow, and composables, ensuring developers consistently apply best practices. It provides clear rules for splitting components, defining props and emits contracts, and maintaining small, focused components with dedicated composables, all while keeping entry/root and route-level view components thin and manageable.

This skill is ideal for frontend developers, Vue.js engineers, and teams aiming to standardize development practices across Vue projects. It is particularly useful for projects that require a scalable component architecture, predictable state management, and adherence to modern Vue 3 conventions. Use cases include building maintainable web applications, creating reusable UI components, and ensuring code quality and consistency in collaborative Vue development environments.

FAQ

Do I have to use the Composition API with this skill?

Yes, the skill strongly recommends using the Composition API with `<script setup>` and TypeScript unless the project explicitly requires the Options API.

Which Vue versions and tools are supported?

The skill is designed for Vue 3 and supports SSR, Volar, vue-tsc, Vue Router, Pinia, and Vite projects using Vue.

Are there mandatory references I need to follow?

Yes, you must keep core references such as reactivity, SFC structure, component data flow, and composables active in your working context throughout the task.

Can I use this skill for small demo projects?

Yes, for tiny single-file demo projects, some guidelines like moving feature UI out of root components may be relaxed, but the general best practices still apply.

Does this skill enforce folder or component structure?

It recommends using a feature folder layout and splitting components based on responsibilities, but it does not enforce a specific file system structure beyond best practice suggestions.

All Files

23 files

SKILL.md8.6 KB