vue-conventions

Guide Vue 3 projects with Composition API and script setup conventions.

9|1|Updated Jun 16, 2026

Search Tags:#typescript #vue #composition-api #script-setup #component-architecture #vue-3 #ui-library-detection

Ready to run

npx skills add https://github.com/AratKruglik/antigravity-sdlc --skill vue-conventions-aratkruglik

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-conventions
Source: https://github.com/AratKruglik/antigravity-sdlc/tree/main/plugins/vue-plugin/skills/vue-conventions
Command: npx skills add https://github.com/AratKruglik/antigravity-sdlc --skill vue-conventions-aratkruglik

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue 3 conventions provide idiomatic patterns and best practices for building Vue 3 SPAs using the Composition API and <script setup>, ensuring consistency, maintainability, and adherence to modern Vue guidelines.

Core Features & Use Cases

Provides a standardized file and directory structure for Vue 3 projects (src, components, views, composables, stores) and guidelines for naming conventions.
Includes templates and examples for <script setup>, props, emits, slots, composables, lifecycle hooks, and UI library detection to streamline project bootstrapping and onboarding.
Useful for teams migrating from Vue 2 to Vue 3, or starting new Vue 3 projects that require scalable organization and consistent conventions.

Quick Start

Set up a Vue 3 project following the conventions to structure components, composables, and stores.

Frequently Asked Questions about vue-conventions

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

FAQPage Schema

How do I structure a Vue 3 project using the Composition API?▼

Structure a Vue 3 project using the Composition API by adopting a standardized file layout with dedicated directories for components, views, composables, and stores to ensure maintainable and scalable organization.

What's the best way to define props and emits in Vue 3 script setup?▼

The best way to define props and emits in Vue 3 script setup is using the defineProps and defineEmits patterns, which provide strict TypeScript typing for consistent component interfaces and maintainable code.

How do I migrate from Vue 2 to Vue 3 conventions?▼

Migrate from Vue 2 to Vue 3 by adopting script setup conventions, transitioning to the Composition API, and restructuring your project layout into composables and stores to align with modern Vue guidelines.

When do I need to use composables in Vue 3?▼

You need to use composables in Vue 3 to encapsulate and reuse reactive state and lifecycle hooks, ensuring consistent logic separation across your components while maintaining a scalable project architecture.

Does this Vue 3 convention guide include UI library detection?▼

Yes, these Vue 3 conventions include UI library detection, providing practical examples and templates to streamline project bootstrapping and integrate component libraries within your script setup workflow.

Can I use TypeScript with Vue 3 script setup?▼

Yes, you can and should use TypeScript with Vue 3 script setup to enforce strict typing for props, emits, and slots, ensuring consistent and maintainable component architecture across your application.