[{"data":1,"prerenderedAt":277},["ShallowReactive",2],{"content-/vue-to-value":3,"surround-/vue-to-value":268},{"id":4,"title":5,"body":6,"description":258,"extension":259,"meta":260,"navigation":67,"order":261,"path":262,"seo":263,"stem":264,"tags":265,"__hash__":267},"content/vue-to-value/index.md","Accept a value, ref, or getter in the same composable",{"type":7,"value":8,"toc":256},"minimark",[9,18,228,242,252],[10,11,12,13,17],"p",{},"In Vue 3.3+, ",[14,15,16],"code",{},"toValue()"," unwraps refs and calls getters. Run it inside a reactive effect so changing inputs remain tracked.",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-ts shiki shiki-themes github-dark","import { computed, ref, toValue } from 'vue'\nimport type { MaybeRefOrGetter } from 'vue'\n\nexport function useGreeting(\n  name: MaybeRefOrGetter\u003Cstring>\n) {\n  return computed(() => `Hello, ${toValue(name)}!`)\n}\n\n// All three input shapes work\nconst nameRef = ref('Michał')\nuseGreeting('Michał')\nuseGreeting(nameRef)\nuseGreeting(() => nameRef.value.toUpperCase())\n","ts","",[14,26,27,47,62,69,85,108,114,150,156,161,168,190,202,210],{"__ignoreMap":24},[28,29,32,36,40,43],"span",{"class":30,"line":31},"line",1,[28,33,35],{"class":34},"snl16","import",[28,37,39],{"class":38},"s95oV"," { computed, ref, toValue } ",[28,41,42],{"class":34},"from",[28,44,46],{"class":45},"sU2Wk"," 'vue'\n",[28,48,50,52,55,58,60],{"class":30,"line":49},2,[28,51,35],{"class":34},[28,53,54],{"class":34}," type",[28,56,57],{"class":38}," { MaybeRefOrGetter } ",[28,59,42],{"class":34},[28,61,46],{"class":45},[28,63,65],{"class":30,"line":64},3,[28,66,68],{"emptyLinePlaceholder":67},true,"\n",[28,70,72,75,78,82],{"class":30,"line":71},4,[28,73,74],{"class":34},"export",[28,76,77],{"class":34}," function",[28,79,81],{"class":80},"svObZ"," useGreeting",[28,83,84],{"class":38},"(\n",[28,86,88,92,95,98,101,105],{"class":30,"line":87},5,[28,89,91],{"class":90},"s9osk","  name",[28,93,94],{"class":34},":",[28,96,97],{"class":80}," MaybeRefOrGetter",[28,99,100],{"class":38},"\u003C",[28,102,104],{"class":103},"sDLfK","string",[28,106,107],{"class":38},">\n",[28,109,111],{"class":30,"line":110},6,[28,112,113],{"class":38},") {\n",[28,115,117,120,123,126,129,132,135,138,141,144,147],{"class":30,"line":116},7,[28,118,119],{"class":34},"  return",[28,121,122],{"class":80}," computed",[28,124,125],{"class":38},"(() ",[28,127,128],{"class":34},"=>",[28,130,131],{"class":45}," `Hello, ${",[28,133,134],{"class":80},"toValue",[28,136,137],{"class":45},"(",[28,139,140],{"class":38},"name",[28,142,143],{"class":45},")",[28,145,146],{"class":45},"}!`",[28,148,149],{"class":38},")\n",[28,151,153],{"class":30,"line":152},8,[28,154,155],{"class":38},"}\n",[28,157,159],{"class":30,"line":158},9,[28,160,68],{"emptyLinePlaceholder":67},[28,162,164],{"class":30,"line":163},10,[28,165,167],{"class":166},"sAwPA","// All three input shapes work\n",[28,169,171,174,177,180,183,185,188],{"class":30,"line":170},11,[28,172,173],{"class":34},"const",[28,175,176],{"class":103}," nameRef",[28,178,179],{"class":34}," =",[28,181,182],{"class":80}," ref",[28,184,137],{"class":38},[28,186,187],{"class":45},"'Michał'",[28,189,149],{"class":38},[28,191,193,196,198,200],{"class":30,"line":192},12,[28,194,195],{"class":80},"useGreeting",[28,197,137],{"class":38},[28,199,187],{"class":45},[28,201,149],{"class":38},[28,203,205,207],{"class":30,"line":204},13,[28,206,195],{"class":80},[28,208,209],{"class":38},"(nameRef)\n",[28,211,213,215,217,219,222,225],{"class":30,"line":212},14,[28,214,195],{"class":80},[28,216,125],{"class":38},[28,218,128],{"class":34},[28,220,221],{"class":38}," nameRef.value.",[28,223,224],{"class":80},"toUpperCase",[28,226,227],{"class":38},"())\n",[10,229,230,231,234,235,237,238,241],{},"Unlike ",[14,232,233],{},"unref()",", ",[14,236,16],{}," also evaluates getter functions. Passing ",[14,239,240],{},"props.name"," directly would only pass its current value.",[10,243,244,251],{},[245,246,250],"a",{"href":247,"rel":248},"https://vuejs.org/api/reactivity-utilities.html#tovalue",[249],"nofollow","Read the Vue documentation",".",[253,254,255],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":24,"searchDepth":49,"depth":49,"links":257},[],"Normalize composable inputs with toValue in Vue 3.3 while keeping reactive dependencies tracked.","md",{},223,"/vue-to-value",{"title":5,"description":258},"vue-to-value/index",[266],"vue","CiGDg-O23IULAaxdCD4HCr6foukYHKhZjIBHLyNG8sg",[269,273],{"title":270,"path":271,"stem":272,"children":-1},"Import a file as text with a single suffix","/vite-import-raw","vite-import-raw/index",{"title":274,"path":275,"stem":276,"children":-1},"Pause a watcher while you batch changes","/vue-pause-watcher","vue-pause-watcher/index",1788695822212]