skills.rest
Esposter
EsposterOFFICIAL
Explore all skills by this author →
GitHub

vue

Enforces Vue 3 single-file component structure and template conventions.

23|3|Updated Jun 28, 2022
Search Tags:#typescript#vue#vue3#composition-api#sfc#template-conventions
One-click install
npx skills add https://github.com/Esposter/Esposter --skill vue-esposter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/Esposter/Esposter/tree/main/.agents/skills/vue
Command: npx skills add https://github.com/Esposter/Esposter --skill vue-esposter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align Vue 3 single-file components with consistent structure, macro ordering, and template conventions to reduce bugs and speed up development.

Core Features & Use Cases

  • Enforces SFC structure, script setup declaration order, and macro usage to improve readability and maintainability.
  • Guides prop typing, refs, computed, and v-model patterns to minimize common mistakes in Vue apps.
  • Addresses common Vue pitfalls (SSR guards, routing usage, and template conventions) to ensure reliable components across apps.

Quick Start

Apply these conventions at the start of every Vue 3 SFC to ensure consistent structure and predictable behavior.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Vue 3 single-file components to improve maintainability?▼

Vue 3 SFC conventions reduce bugs by enforcing script setup declaration order, prop typing, and template structure. Applying these standards to single-file components ensures predictable behavior and improves readability across frontend Vue projects.

What is the best way to define props and v-model patterns in Vue 3 composition API?▼

The best way to define props and v-model patterns in Vue 3 is by enforcing strict prop typing and standardized macro usage within script setup. This minimizes common mistakes and ensures reliable component data flow.

How do I order script setup declarations and macros in Vue 3 SFCs?▼

Order script setup declarations and macros in Vue 3 SFCs by following established structural conventions. Enforcing a specific sequence for macros, refs, and computed properties improves readability and maintains predictable component behavior.

How do I prevent common Vue 3 pitfalls related to SSR guards and routing usage?▼

Prevent common Vue 3 pitfalls related to SSR guards and routing usage by applying standardized template conventions and structural guards. Addressing these edge cases ensures reliable components across apps during server-side rendering and navigation.

Does standardizing Vue 3 template conventions actually reduce bugs in frontend projects?▼

Standardizing Vue 3 template conventions does reduce bugs in frontend projects by aligning single-file components with consistent structures. Enforcing script setup order and macro usage minimizes common mistakes and improves overall maintainability.

Related Skills

Explore More Software Engineering Skills→
mymx2mymx2
4

vize

Compile, lint, format, and type-check Vue.js projects with a Rust-native toolchain.

Community
Advanced
denizzeybekdenizzeybek
1

vue-component

Generate Vue 3 Single File Components with enforced project conventions.

Community
Intermediate
Jignesh-PonamwarJignesh-Ponamwar
5

vue-framework

Organize Vue 3 projects with patterns for components, state, and routing.

Community
Intermediate
wjyugutouwjyugutou

vue-best-practices

Standardize Vue 3 development with Composition API and TypeScript patterns.

Community
Advanced