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.

Works for Vue 2 & 3.

dependencies

• Vue Demi

setup

npm

npm i @seregpie/vue-resize-sensor

---

import VueResizeSensor from '@seregpie/vue-resize-sensor';

browser

<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/@seregpie/vue-resize-sensor"></script>

The component is globally available as VueResizeSensor.

usage

Register the component globally.

import {createApp} from 'vue';
import VueResizeSensor from '@seregpie/vue-resize-sensor';

let app = createApp({/*...*/});
app.component(VueResizeSensor.name, VueResizeSensor);
app.mount('body');

or

Register the component locally.

import VueResizeSensor from '@seregpie/vue-resize-sensor';

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

---

Wrap the content inside the default slot.

<vue-resize-sensor
  style="
    height: 100%;
    width: 100%;
  "
  v-slot="{width, height}"
>
  <my-header v-if="height > 400"/>
  <div
    :style="{flexDirection: (width > height) ? 'row' : 'column'}"
    style="display: flex;"
  >
    <my-first-item/>
    <my-second-item/>
  </div>
</vue-resize-sensor>

---

Capture the resize event.

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

methods: {
  onResize({width, height}) {
    // 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"/>