Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · Developer Tools
Vue
Avoid common Vue mistakes — reactivity traps, ref vs reactive, computed timing, and Composition API pitfalls.
skill openclawclawhub Free
Avoid common Vue mistakes — reactivity traps, ref vs reactive, computed timing, and Composition API pitfalls.
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, components.md, composables.md, performance.md, reactivity.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.1
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
When to Use
User needs Vue expertise — from Composition API patterns to production optimization. Agent handles reactivity, component design, state management, and performance.
Quick Reference
TopicFileReactivity patternsreactivity.mdComponent patternscomponents.mdComposables designcomposables.mdPerformance optimizationperformance.md
Composition API Philosophy
Composition API is not about replacing Options API—it's about better code organization Group code by feature, not by option type—related logic stays together Extract reusable logic into composables—the main win of Composition API <script setup> is the recommended syntax—cleaner and better performance
Reactivity Traps
ref for primitives—access with .value in script, auto-unwrapped in template reactive can't reassign whole object—state = {...} breaks reactivity Destructuring reactive loses reactivity—use toRefs(state) to preserve Array index assignment reactive in Vue 3—arr[0] = x works, unlike Vue 2 Nested refs unwrap inside reactive—reactive({count: ref(0)}).count is number, not ref
Watch vs Computed
computed for derived state—cached, recalculates only when dependencies change watch for side effects—when you need to DO something in response to changes computed should be pure—no side effects, no async watchEffect for immediate reaction with auto-tracked dependencies
Watch Traps
Watching reactive object needs deep: true—or watch a getter function watch is lazy by default—use immediate: true for initial run Watch callback receives old/new—watch(source, (newVal, oldVal) => {}) watchEffect can't access old value—use watch if you need old/new comparison Stop watchers with returned function—const stop = watch(...); stop()
Props and Emits Traps
defineProps for type-safe props—defineProps<{ msg: string }>() Props are readonly—don't mutate, emit event to parent defineEmits for type-safe events—defineEmits<{ (e: 'update', val: string): void }>() v-model is :modelValue + @update:modelValue—custom v-model with defineModel() Default value for objects must be factory function—default: () => ({})
Template Ref Traps
ref="name" + const name = ref(null)—names must match exactly Template refs available after mount—access in onMounted, not during setup ref on component gives component instance—ref on element gives DOM element Template ref with v-for becomes array of refs
Lifecycle Traps
onMounted for DOM access—component mounted to DOM onUnmounted for cleanup—subscriptions, timers, event listeners onBeforeMount runs before DOM insert—rarely needed but exists Hooks must be called synchronously in setup—not inside callbacks or conditionals Async setup needs <Suspense> wrapper
Provide/Inject Traps
provide('key', value) in parent—inject('key') in any descendant Reactive if value is ref/reactive—otherwise static snapshot Default value: inject('key', defaultVal)—third param for factory function Symbol keys for type safety—avoid string key collisions
Vue Router Traps
useRoute for current route—reactive, use in setup useRouter for navigation—router.push('/path') Navigation guards: beforeEach, beforeResolve, afterEach—return false to cancel <RouterView> with named views—multiple views per route
Common Mistakes
v-if vs v-show—v-if removes from DOM, v-show toggles display Key on v-for required—v-for="item in items" :key="item.id" Event modifiers order matters—.prevent.stop vs .stop.prevent Teleport for modals—<Teleport to="body"> renders outside component tree
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
5 Docs
- SKILL.md
- components.md
- composables.md
- performance.md
- reactivity.md