---
title: "useForwardExpose"
description: "Forward component's exposed value, props and $el."
canonical_url: "https://vinicunca.dev/akar/utilities/use-forward-expose"
---
# useForwardExpose

> Forward component's exposed value, props and $el.

When building a component, if we have a non-single root node component, the template refs will not return the DOM element via `$el` ([read more](https://vuejs.org/api/component-instance.html#el)) , thus, we need to forward the `$el` in template ref for this component manually. Or in some case you want to target certain element as the expose element..

Furthermore, this composable extend the missing exposed `props` from the template refs.

## Usage

```vue
<script setup lang="ts">
import { useForwardExpose } from 'akar';

const selectedElementId = ref(1);
const { forwardRef } = useForwardExpose();
</script>

<template>
  <!-- We want to expose div as the template ref's element -->
  <div :ref="forwardRef">
    ...
  </div>
</template>
```


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.