Author Vue 3 TypeScript single-file components with Composition API and script setup.
npx skills add https://github.com/belos-street/skill-kit --skill vue-belos-street
Please help me install this Agent Skill. Skill: vue Source: https://github.com/belos-street/skill-kit/tree/main/skills/vue Command: npx skills add https://github.com/belos-street/skill-kit --skill vue-belos-street
Provides clear, opinionated guidance for authoring Vue 3 single-file components (SFCs) and composables using the Composition API and script setup with TypeScript, reducing errors from misuse of reactivity, lifecycle hooks, and compiler macros.
<script setup lang="ts">, typed props/emits/models, and component options to improve maintainability.Use the vue skill to scaffold a TypeScript-based Composition API single-file component with typed props, emits, and a composable for fetching data.
High-intent search queries and answers about installing and using this skill.
To build Vue 3 components, use `<script setup lang="ts">` for authoring single-file components. This approach manages typed defineProps, defineEmits, and defineModel macros alongside reactivity choices like ref and computed to ensure maintainability.
Use shallowRef in Vue when managing large objects where deep reactivity tracking causes performance overhead. ShallowRef limits reactivity to the top-level reference, optimizing render performance compared to deep tracking with standard ref.
The best way to type defineProps and defineEmits in Vue single-file components is by using TypeScript compiler macros within `<script setup>`. This provides clear, opinionated guidance for component options and improves overall maintainability.
Use built-in components like Teleport, Suspense, and KeepAlive in Vue 3 by integrating them within your single-file component templates. They manage dynamic rendering, asynchronous component loading, and component caching for optimized performance.
Yes, this Vue 3 skill provides guidance on effect scopes and lifecycle management. It helps you apply reactivity choices, watch effects, and lifecycle hooks reliably when scaffolding components or converting Options API code.
Optimize render performance in Vue 3 by applying v-memo to skip re-renders of unchanged sub-trees and using custom directives for direct DOM manipulation. These patterns reduce unnecessary reactivity triggers during component updates.
heamlkStandardize Vue 3 SFC development with script setup and typed props.
PatternsDevCreate reactive Vue stores with Pinia defineStore for shared state.
fanguyunCreate Vue 3 components with Composition API and Pinia state management.
SandroBeatzProvide Vue 3 documentation and examples for components and applications.