skills.rest
wjyugutou
wjyugutouCOMMUNITY
Explore all skills by this author →
GitHub

vue-best-practices

Standardize Vue 3 development with Composition API and TypeScript patterns.

Updated Apr 6, 2022
Search Tags:#typescript#vue#vite#best-practices#ssr#composition-api#vue-router
One-click install
npx skills add https://github.com/wjyugutou/study-test-demo --skill vue-best-practices-wjyugutou
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-best-practices
Source: https://github.com/wjyugutou/study-test-demo/tree/main/.trae/skills/vue-best-practices
Command: npx skills add https://github.com/wjyugutou/study-test-demo --skill vue-best-practices-wjyugutou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates Vue 3 best-practices to ensure consistent patterns across projects, covering Composition API usage, TypeScript integration, SSR considerations, and modern tooling.

Core Features & Use Cases

  • Enforce Composition API-first patterns by default for Vue 3 projects.
  • Provide guidance for TypeScript integration, including typings and editor support.
  • Outline SSR hydration, hydration strategies, and Vue Router/Vite integration examples.
  • Establish project structure, naming conventions, and maintainable component organization.
  • Offer migration guidance from Options API to Composition API, and strategies for using provide/inject vs Pinia for state.

Quick Start

Start by aligning your project to the Vue best-practices in this skill. Use the references to augment decisions, and apply the patterns to a sample app to observe consistency across the codebase.

Frequently Asked Questions about vue-best-practices

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

FAQPage Schema
What's the best way to structure a Vue 3 project with Composition API and TypeScript?▼

The best way to structure a Vue 3 project is enforcing Composition API-first patterns with TypeScript integration for typings and editor support. This ensures consistent maintainable component organization and naming conventions across your codebase.

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

To migrate from Options API to Composition API, apply consistent patterns that leverage Vue 3's modern tooling. The skill provides specific migration guidance to align your existing components with Composition API-first standards.

When do I need SSR hydration strategies in Vue 3 applications?▼

You need SSR hydration strategies in Vue 3 when building server-side rendered applications using Vue Router and Vite. The skill outlines specific hydration considerations and integration examples to ensure proper server-side rendering execution.

Should I use provide/inject or Pinia for state management in Vue 3?▼

Choosing between provide/inject and Pinia for state management in Vue 3 depends on your application scale. The skill provides specific strategies for evaluating both approaches to maintain consistent state handling across components.

Do I need additional dependencies to standardize Vue 3 development practices?▼

You do not need additional dependencies to standardize Vue 3 development practices, as the skill requires only standard tooling. It references Vue docs directly to enforce best practices across Vite, Pinia, and TypeScript integrations.

Related Skills

Explore More Software Engineering Skills→
genomicxgenomicx
1

genomicx-app-creator

Scaffold GenomicX browser-based bioinformatics apps with Vite+React or Next.js 15.

Official
Intermediate
LukasStricklerLukasStrickler
4

code-quality

Automate TypeScript type checking, linting, formatting, and Markdown validation.

Community
Advanced
sduduzogsduduzog

pinia

Your storefront is ready.

Community
Advanced
PatternsDevPatternsDev
235

composables

Create Vue composables that share reactive state and lifecycle logic across components.

Official
Intermediate