Vue Use Utilities

# useElementSize

useElementSize

Reactive Element (opens new window) size.

# Example

💡 resize the textarea, and watch the element size changed.

# Usage

<div class="wrapper">
  <label for="story">Tell us your story:</label>

  <textarea
    id="story"
    name="story"
    rows="5"
    cols="33"
    ref="textareaRef"
  >
    It was a dark and stormy night...
  </textarea>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useElementSize } from '@vueblocks/vue-use-core'

export default {
  setup () {
    const textareaRef = ref(null)

    const { width, height } = useElementSize(textareaRef)

    return {
      textareaRef,
      width,
      height
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Typing

interface WindowSize {
    width: Ref<number>;
    height: Ref<number>;
}
interface ElementSize extends WindowSize {
}

declare const useElementSize: (target: Element, options: ResizeObserverOptions) => ElementSize;
1
2
3
4
5
6
7
8

← useEventListener →