Guide Vue 3 Composition API and script setup for TypeScript Single File Components.
npx skills add https://github.com/remoodle/heresy --skill vue-remoodle
Please help me install this Agent Skill. Skill: vue Source: https://github.com/remoodle/heresy/tree/main/src/calendar/.agents/skills/vue Command: npx skills add https://github.com/remoodle/heresy --skill vue-remoodle
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 watch for dynamic UIs.Transition, Teleport, Suspense, and KeepAlive for enhanced user experiences.Use the vue skill to generate a basic Vue 3 component using <script setup lang="ts"> with a reactive counter.
High-intent search queries and answers about installing and using this skill.
In Vue 3 script setup with TypeScript, you define props and emits using the defineProps and defineEmits compiler macros. This enables type-safe component interfaces for performant Single File Components.
Vue 3 reactivity uses ref to deeply track changes in reactive objects, while shallowRef only tracks replacement of the entire value. Use shallowRef to optimize performance when deep reactivity is unnecessary.
Vue 3 built-in components like Teleport and Suspense manage sophisticated UI rendering. Teleport renders content at a different DOM location, while Suspense handles asynchronous component loading states.
Yes, you manage Vue 3 component lifecycle hooks inside script setup by importing functions like onMounted and onUnmounted. This organizes hook logic directly within the Composition API scope.
Use KeepAlive to cache dynamic Vue 3 component states and prevent re-rendering. Combine it with Transition to apply animation effects during component switching for an enhanced user experience.
The best way to write computed properties and watchers in Vue 3 is using the computed and watch functions. This approach derives reactive state and executes side effects cleanly within script setup.
lucasfdigitalLint and validate Node.js and Python code with ESLint, tsc, Ruff, and Bandit.
ZhanlinCuiBuild React/TypeScript artifacts bundled into a single HTML file for Claude.
a35506322Fix Pinia state management errors in Vue 3 applications.
coreyjaDesign reusable frontend components with TypeScript props and state management.