Window Resize Observable     

QWindowResizeObservable is a Quasar component that emits a resize event whenever the document viewport (window) changes its size, with no polling involved.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QWindowResizeObservable'
  ]
}

Basic Usage

<template>
  ...
    <!--can be placed anywhere within your template -->
    <q-window-resize-observable @resize="onResize" />
  ...
</template>

<script>
export default {
  ...,
  methods: {
    ...,
    onResize (size) {
      console.log(size)
      // {
      //   width: 1200 // width of viewport (in px)
      //   height: 920 // height of viewport (in px)
      // }
    }
  }
}
</script>

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

Element Resize Observable Button
Last updated: Mon Jul 23 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub