15:["$","div","opencode",{"className":"flex items-center justify-between text-sm py-2","children":[["$","span",null,{"className":"text-foreground","children":"opencode"}],["$","span",null,{"className":"text-muted-foreground font-mono","children":"115"}]]}] 17:T4fb,

VueUse Best Practices

Best practices and common gotchas for VueUse composables.

When to Apply

Working with VueUse composables
Debugging VueUse SSR issues
Fixing type inference issues with VueUse

Efficiency Rules

Rules that help AI solve problems more effectively and consistently.

Rule	Impact	Description
ssr-compatibility	HIGH	Handle VueUse composables in SSR environments
target-element-refs	MEDIUM	Properly pass element refs to VueUse composables

Reference

14:["$","div",null,{"className":"prose prose-invert max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-4xl prose-h1:mb-2 prose-h2:text-2xl prose-h2:mb-2 prose-h3:text-lg prose-h3:mb-2 prose-p:text-muted-foreground prose-li:text-muted-foreground prose-code:bg-muted prose-code:text-foreground prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:rounded-md [&_table]:!border-[color:var(--border)] [&_th]:!border-[color:var(--border)] [&_td]:!border-[color:var(--border)]","dangerouslySetInnerHTML":{"__html":"$17"}}]

vueuse-best-practices

VueUse Best Practices

When to Apply

Efficiency Rules

Reference