f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2.2 KiB
2.2 KiB
category, alias
| category | alias |
|---|---|
| Reactivity | resolveRef |
toRef
Normalize value/ref/getter to ref or computed.
Usage
import { toRef } from '@vueuse/core'
const foo = ref('hi')
const a = toRef(0) // Ref<number>
const b = toRef(foo) // Ref<string>
const c = toRef(() => 'hi') // ComputedRef<string>
Differences from Vue's toRef
VueUse's toRef is not the same as Vue’s toRef from the vue package.
VueUse toRef
- Accepts value, ref, or getter
- Returns:
- a ref for primitive values
- a ref for existing refs
- a computed for getter functions
- Does not accept
object + key - Getters always produce readonly computed values
Vue toRef
- Accepts only:
- a reactive object + property key, or
- an existing ref
- Produces a writable ref linked to the underlying reactive object
- Does not accept primitive values
- Does not accept getter functions
Summary
| Behavior | VueUse toRef |
Vue toRef |
|---|---|---|
| Accepts primitive values | ✔️ | ❌ |
| Accepts getter | ✔️ (computed) | ❌ |
| Accepts existing ref | ✔️ | ✔️ |
| Accepts object + key | ❌ | ✔️ |
| Writable | ✔️ (except getter) | ✔️ |
| Purpose | Normalize to ref/computed | Bind to reactive object |
Type Declarations
/**
* Normalize value/ref/getter to `ref` or `computed`.
*/
export declare function toRef<T>(r: () => T): Readonly<Ref<T>>
export declare function toRef<T>(r: ComputedRef<T>): ComputedRef<T>
export declare function toRef<T>(r: MaybeRefOrGetter<T>): Ref<T>
export declare function toRef<T>(r: T): Ref<T>
export declare function toRef<T extends object, K extends keyof T>(
object: T,
key: K,
): ToRef<T[K]>
export declare function toRef<T extends object, K extends keyof T>(
object: T,
key: K,
defaultValue: T[K],
): ToRef<Exclude<T[K], undefined>>