docs: add advanced skills for Vitest, Pinia, and Vue built-ins
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled

Add comprehensive reference documentation for:
- Vitest: environments, projects/workspaces, type testing, vi utilities
- Pinia: HMR, Nuxt integration, SSR setup
- Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
This commit is contained in:
Ovidiu U
2026-04-11 16:28:36 +01:00
parent 069a85cf11
commit 4a3ce4cc1d
405 changed files with 41122 additions and 0 deletions

View File

@@ -0,0 +1,75 @@
---
category: Reactivity
alias: resolveRef
---
# toRef
Normalize value/ref/getter to `ref` or `computed`.
## Usage
```ts
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 Vues `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
```ts
/**
* 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>>
```