1---
2category: Reactivity
3---
4 
5# extendRef
6 
7Add extra attributes to Ref.
8 
9## Usage
10 
11> Please note the extra attribute will not be accessible in Vue's template.
12 
13```ts
14import { extendRef } from '@vueuse/core'
15import { shallowRef } from 'vue'
16 
17const myRef = shallowRef('content')
18 
19const extended = extendRef(myRef, { foo: 'extra data' })
20 
21extended.value === 'content'
22extended.foo === 'extra data'
23```
24 
25Refs will be unwrapped and be reactive
26 
27```ts
28import { extendRef } from '@vueuse/core'
29// ---cut---
30const myRef = shallowRef('content')
31const extraRef = shallowRef('extra')
32 
33const extended = extendRef(myRef, { extra: extraRef })
34 
35extended.value === 'content'
36extended.extra === 'extra'
37 
38extended.extra = 'new data' // will trigger update
39extraRef.value === 'new data'
40```
41 
42## Type Declarations
43 
44```ts
45export type ExtendRefReturn<T = any> = Ref<T>
46export interface ExtendRefOptions<Unwrap extends boolean = boolean> {
47  /**
48   * Is the extends properties enumerable
49   *
50   * @default false
51   */
52  enumerable?: boolean
53  /**
54   * Unwrap for Ref properties
55   *
56   * @default true
57   */
58  unwrap?: Unwrap
59}
60/**
61 * Overload 1: Unwrap set to false
62 */
63export declare function extendRef<
64  R extends Ref<any>,
65  Extend extends object,
66  Options extends ExtendRefOptions<false>,
67>(ref: R, extend: Extend, options?: Options): ShallowUnwrapRef<Extend> & R
68/**
69 * Overload 2: Unwrap unset or set to true
70 */
71export declare function extendRef<
72  R extends Ref<any>,
73  Extend extends object,
74  Options extends ExtendRefOptions,
75>(ref: R, extend: Extend, options?: Options): Extend & R
76```
77