> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/useelementsize.md).

# useElementSize

#### 基础用法

```html
<template>
   <div ref="target">
      Size: {{size.width}} x {{size.height}}
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useElementSize } from "hooks-vue3";

const target = ref(null);
const size = useElementSize(target);
</script>
```

### API

```typescript
const size = useElementSize(target);
```

### 参数

```typescript
interface Size {
  width: number;
  height: number;
}

type Target<T> = T | (() => T) | Ref<T>;

function useElementSize(target: Target<Element | null>): Ref<Size>
```

```typescript
```