Element Resize Observable     

QResizeObservable is a Quasar component that emits a resize event whenever the wrapping DOM element / component (defined as direct parent of QResizeObservable) changes its size. Note that no polling is involved, but overusing it is costly too.


Edit /quasar.conf.js:

framework: {
components: [

Basic Usage

we listen for size changes on this next
<div>, so we place the observer as direct child:
<q-resize-observable @resize="onResize" />

export default {
methods: {
onResize (size) {
// {
// width: 20 // width of container (in px)
// height: 50 // height of container (in px)
// }

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

Vue Properties

debounceNumber(Quasar v0.15.7+, default: 100) Debounce time in milliseconds