Build Vue 3 single-file components with Composition API and script setup.
npx skills add https://github.com/mheers/opencode-sandbox --skill vue-mheers
Please help me install this Agent Skill. Skill: vue Source: https://github.com/mheers/opencode-sandbox/tree/main/skills/vue Command: npx skills add https://github.com/mheers/opencode-sandbox --skill vue-mheers
Vue 3 app development often requires a consistent approach to using the Composition API and script setup to ensure readability and maintainability. This skill provides guidance and examples for building Vue components with proper props, emits, and reactivity patterns.
Write a Vue SFC using <script setup lang="ts"> and defineProps/defineEmits to create a typed counter component.
High-intent search queries and answers about installing and using this skill.
Vue 3 script setup uses defineProps and defineEmits compiler macros for typed component communication. Declare them directly inside the <script setup lang="ts"> block to automatically infer types without importing them from the Vue library.
The best way to manage reactivity in Vue 3 Composition API is using primitives like ref and computed alongside watch. Coordinate state and lifecycle logic within the script setup block to maintain readable and maintainable UI-intensive applications.
Yes, Vue 3 script setup works seamlessly with TypeScript for component authoring. Enforce <script setup lang="ts"> to enable type checking on macros like defineModel, defineProps, and defineEmits, ensuring strict type safety in single-file components.
Yes, you can use built-in components like Teleport, Suspense, Transition, and KeepAlive with Vue 3 Composition API. They integrate directly within your script setup templates to coordinate complex UI rendering and state lifecycles.
To define two-way binding in Vue 3, use the defineModel macro inside your script setup block. This simplifies coordinating parent-child state reactivity by replacing manual v-bind and v-on combinations for model updates.
You should not use Vue 3 script setup if your project lacks TypeScript support or relies heavily on Options API patterns. This approach specifically enforces Composition API usage and TypeScript, making it unsuitable for legacy Vue 2 migrations.
CloudyWingEnforce Vue 3 Composition API and script setup guidelines with TypeScript.
heamlkStandardize Vue 3 SFC development with script setup and typed props.
aaravminIntegrate Clerk authentication into Vue 3 apps with composables, router guards, and Pinia.
anouar1991Detect frontend frameworks and snapshot component state for diffing.
