1---
2category: Component
3---
4 
5::: info
6This function will be removed in future version.
7 
8Vue 3.5 introduced the `useTemplateRef` API which can effectively replace the functionality of `templateRef`, therefore we recommend using the native approach.
9:::
10 
11# templateRef
12 
13Shorthand for binding ref to template element.
14 
15## Usage
16 
17<!-- eslint-skip -->
18 
19```vue
20<script lang="ts">
21import { templateRef } from '@vueuse/core'
22 
23export default {
24  setup() {
25    const target = templateRef('target')
26 
27    // no need to return the `target`, it will bind to the ref magically
28  },
29}
30</script>
31 
32<template>
33  <div ref="target" />
34</template>
35```
36 
37### With JSX/TSX
38 
39```tsx
40import { templateRef } from '@vueuse/core'
41 
42export default {
43  setup() {
44    const target = templateRef<HTMLElement | null>('target', null)
45 
46    // use string ref
47    return () => <div ref="target"></div>
48  },
49}
50```
51 
52### `<script setup>`
53 
54There is no need for this when using with `<script setup>` since all the variables will be exposed to the template. It will be exactly the same as `ref`.
55 
56```vue
57<script setup lang="ts">
58import { ref } from 'vue'
59 
60const target = ref<HTMLElement | null>(null)
61</script>
62 
63<template>
64  <div ref="target" />
65</template>
66```
67 
68## Type Declarations
69 
70```ts
71/**
72 * @deprecated Use Vue's built-in `useTemplateRef` instead.
73 *
74 * Shorthand for binding ref to template element.
75 *
76 * @see https://vueuse.org/templateRef
77 * @param key
78 * @param initialValue
79 *
80 * @__NO_SIDE_EFFECTS__
81 */
82export declare function templateRef<
83  T extends HTMLElement | SVGElement | Component | null,
84  Keys extends string = string,
85>(key: Keys, initialValue?: T | null): Readonly<Ref<T>>
86```
87