skills.rest
leighayanid
leighayanidCOMMUNITY
Explore all skills by this author →
Website𝕏@dev_structGitHub

vue-best-practices

Enforce Vue 3 Composition API and SSR best practices in code reviews.

Updated Jan 31, 2026
Search Tags:#performance#vue#best-practices#vue3#ssr#composition-api#keep-alive
One-click install
npx skills add https://github.com/leighayanid/unuxt --skill vue-best-practices-leighayanid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/leighayanid/unuxt/tree/main/.agents/skills/vue-best-practices
Command: npx skills add https://github.com/leighayanid/unuxt --skill vue-best-practices-leighayanid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the lack of consistent Vue 3 practices by consolidating official patterns, gotchas, and performance guidance into actionable rules engineers can apply in code reviews and day-to-day development.

Core Features & Use Cases

  • Enforces Composition API best practices (setup, script setup, naming conventions) and clarifies when to use reactive state, computed, and watchers.
  • Guides architectural decisions around composables, provide/inject versus Pinia, and module boundaries for scalable apps.
  • Covers SSR hydration, TransitionGroup/KeepAlive optimization, and routing cache strategies for better performance and UX.

Quick Start

Apply the Vue best-practices guidelines to a new or existing project by auditing components, migrating a sample Options API component to Composition API, and aligning state management with modular composables.

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema
What are Vue 3 Composition API best practices for managing reactive state and watchers?▼

Vue 3 Composition API best practices codify when to use reactive state, computed properties, and watchers to resolve inconsistencies. Proper setup and script setup naming conventions enforce predictable lifecycle usage patterns and scalable composable design.

How do I migrate Options API components to Vue 3 Composition API?▼

Migrate Options API components to Vue 3 Composition API by auditing existing components, applying script setup, and aligning state management with modular composables. This codifies lifecycle usage patterns and clarifies architectural decisions for scalable apps.

Does this Vue best practices guidance cover SSR hydration and KeepAlive optimization?▼

Vue best practices guidance covers SSR hydration strategies, TransitionGroup and KeepAlive optimization, and routing cache strategies. These actionable rules enforce performance guidance and better UX for Vue 3 projects using the Composition API.

What is the best way to choose between provide/inject and Pinia for Vue 3 state management?▼

Choosing between provide/inject and Pinia depends on module boundaries for scalable apps. Vue best practices guide architectural decisions around composables and state management to resolve inconsistencies and enforce consistent development patterns.

When should I use computed properties versus methods in Vue 3?▼

Use computed properties versus methods in Vue 3 based on caching requirements and reactivity needs. Vue best practices enforce computed-vs-method decisions to optimize performance and establish actionable rules for day-to-day development and code reviews.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

vue-development-guides

Provide centralized Vue 3 and Nuxt 3 development best practices and references.

Community
Intermediate
runkidsrunkids
11

vue-options-api-best-practices

Guide Vue 3 Options API components with TypeScript-safe props and defineComponent.

Community
Advanced
belos-streetbelos-street
8

vue-best-practices

Provides Vue 3 coding guidance for Composition API, reactivity, and TypeScript issues.

Community
Advanced
trcattrcat

vue-best-practices

Document Vue 3 Composition API best practices for script setup, SSR, and TypeScript.

Community
Intermediate