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.

Vue Properties