Guide Vue 3 component development with Composition API and script setup.
npx skills add https://github.com/martylouis/agents --skill vue-martylouis
Please help me install this Agent Skill. Skill: vue Source: https://github.com/martylouis/agents/tree/main/.agents/skills/vue Command: npx skills add https://github.com/martylouis/agents --skill vue-martylouis
This Skill helps developers efficiently build modern Vue.js applications by leveraging the Composition API, script setup, and advanced features for better performance and maintainability.
<script setup lang="ts">.ref, shallowRef, computed, and watchers for dynamic UIs.Transition, manage DOM portals with Teleport, handle async operations with Suspense, and cache components with KeepAlive.defineModel for two-way binding.Use the vue skill to create a new Vue 3 component using <script setup lang="ts"> that defines props for a title and an optional count, and emits an update event.
High-intent search queries and answers about installing and using this skill.
Use the `<script setup lang="ts">` syntax in your Single File Component to define props and emits directly. This Vue 3 Composition API approach compiles into efficient render functions, providing cleaner component organization.
The best way to manage Vue 3 reactivity is using `ref`, `shallowRef`, and `computed` properties within the Composition API to track reactive state and compute derived values for dynamic user interfaces.
Handle two-way binding in Vue 3 by using the `defineModel` macro within `<script setup>`, which simplifies binding interdependent form fields and emitting update events for dynamic validation.
Use Vue built-in components like Teleport for managing DOM portals, Suspense for handling async operations, Transition for animations, and KeepAlive for caching component state to enhance application architecture.
Yes, the Vue 3 Composition API works effectively for complex forms by allowing you to structure interdependent fields and dynamic validation logic cleanly using reactive variables and watchers.
PatternsDevSimplify Vue 3 component scripts using script setup, defineProps, and defineEmits.
xurenluDevelop Vue 3 components with Composition API, script setup, and TypeScript.
micserrConvert wireframe files into interactive Vue 3 prototypes with Vue Router and Pinia.
reatomCreate reactive stateful JSX components using Reatom state management.