---
title: Resize Observer
related:
  - title: useElementSize composable
    path: ../vue-composables/use-element-size.md
  - title: v-resize directive
    path: ../vue-directives/resize.md
---
QResizeObserver is a Quasar component that emits a `resize` event whenever the wrapping DOM element / component (defined as direct parent of QResizeObserver) changes its size (width and/or height). The reported size is the element's outer size (padding and border included), so a padding change on the wrapping element itself is reported too. Note that no polling is involved, but overusing it is costly too.

Should you prefer the size as reactive state in your setup code, or want to watch an element that is not the direct parent, use the [useElementSize](../vue-composables/use-element-size.md) composable that this component is built on. The [v-resize](../vue-directives/resize.md) directive is the template-side alternative that needs no extra node.

## QResizeObserver API

### Props

- `debounce` (string | number, optional), default `100`
  Debounce amount (in milliseconds)
  Examples: `0`, `'530'`

### Methods

- `trigger(immediately?: boolean): void`
  Emit a 'resize' event
  Params:
    - `immediately` (boolean, optional)
      Skip over the debounce amount

### Events

- `@resize`
  Parent element has resized (outer width or height changed; padding and border included)
  Params:
    - `size` (object, optional)
      New size
      Object shape:
        - `height` (number, required)
          Layout height
        - `width` (number, required)
          Layout width

## Usage

Example "Basic":

```vue
<template>
  <div class="q-gutter-md">
    <q-btn
      color="primary"
      push
      @click="setRandomSize"
      label="Set Random Size"
    />

    <div :style="style" class="container bg-amber rounded-borders glossy">
      <!--
        we listen for size changes on this next
        <div>, so we place the observer as direct child:
      -->
      <q-resize-observer @resize="onResize" />
    </div>

    <div v-if="report" class="q-gutter-sm">
      Reported:
      <q-badge>width: {{ report.width }}</q-badge>
      <q-badge>height: {{ report.height }}</q-badge>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const style = ref({ width: '200px', height: '200px' })
const report = ref(null)

function onResize(size) {
  report.value = size
  // {
  //   width: 20 // width of container (in px)
  //   height: 50 // height of container (in px)
  // }
}

function setRandomSize() {
  style.value = {
    width: Math.floor(100 + Math.random() * 200) + 'px',
    height: Math.floor(100 + Math.random() * 200) + 'px'
  }
}
</script>

<style lang="sass" scoped>
.container
  transition: width .3s, height .3s
</style>
```

Please note that QResizeObserver will issue an event as soon as it gets rendered and attached to DOM, so you can have the initial size of the container.

## Accessibility *(v2.25+)*

QResizeObserver renders nothing, so it has no accessibility surface.