Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Apply VueUse composables in Vue 3/Nuxt projects to replace custom implementations with battle-tested utilities.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
references/createUnrefFn.md
1---2category: Utilities3related: reactify4---56# createUnrefFn78Make a plain function accepting ref and raw values as arguments.9Returns the same value the unconverted function returns, with proper typing.1011::: tip12Make sure you're using the right tool for the job. Using `reactify`13might be more pertinent in some cases where you want to evaluate the function on each changes of it's arguments.14:::1516## Usage1718```ts19import { createUnrefFn } from '@vueuse/core'20import { shallowRef } from 'vue'2122const url = shallowRef('https://httpbin.org/post')23const data = shallowRef({ foo: 'bar' })2425function post(url, data) {26return fetch(url, { data })27}28const unrefPost = createUnrefFn(post)2930post(url, data) /* ❌ Will throw an error because the arguments are refs */31unrefPost(url, data) /* ✔️ Will Work because the arguments will be auto unref */32```3334## Type Declarations3536```ts37export type UnrefFn<T> = T extends (...args: infer A) => infer R38? (39...args: {40[K in keyof A]: MaybeRef<A[K]>41}42) => R43: never44/**45* Make a plain function accepting ref and raw values as arguments.46* Returns the same value the unconverted function returns, with proper typing.47*48* @__NO_SIDE_EFFECTS__49*/50export declare function createUnrefFn<T extends Function>(fn: T): UnrefFn<T>51```52