vueresizesensor v19.3.0

VueResizeSensor

A container that supports the resize event. It contains an absolute positioned <iframe> element. An inline frame supports the resize event natively. Every time the container resizes, it triggers the resize event of the contained inline frame and the event handler of the inline frame triggers the resize event of the container.

setup

npm

npm i vueresizesensor

ES module

Register the component globally.

import Vue from 'vue';
import VueResizeSensor from 'vueresizesensor';

Vue.component(VueResizeSensor.name, VueResizeSensor);

or

Register the component in the scope of another component.

import VueResizeSensor from 'vueresizesensor';

export default {
  components: {
    [VueResizeSensor.name]: VueResizeSensor,
  },
  // ...
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vueresizesensor"></script>

If Vue is detected, the component will be registered automatically.

usage

<vue-resize-sensor
  style="
    height: 100%;
    width: 100%;
  "
>
  <template v-slot="{w, h}">
    <my-header v-if="h > 400"/>
    <div
      :style="{flexDirection: w > h ? 'row' : 'column'}"
      style="display: flex;"
    >
      <my-primary-content/>
      <my-secondary-content/>
    </div>    
  </template>
</vue-resize-sensor>

Capture resize event.

<div>
  <vue-resize-sensor @resize="onResize"/>
  <my-content/>
</div>

// ...
methods: {
  onResize({w, h}) {
    // handle resize
  },
},

The component renders a <div> element by default. You can change the element that is rendered with the tag attribute.

<vue-resize-sensor tag="form"/>