VueResizeSensor

A Vue container that supports the resize event.

Works for Vue 2 & 3.

dependencies

- Vue Demi

setup

$3

``shell
npm i @seregpie/vue-resize-sensor
`

---

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

$3

`html






`

The component is globally available as VueResizeSensor.

usage

Register the component globally.

`javascript
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.

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

export default {
components: {
VueResizeSensor,
},
// ...
};
`

---

Wrap the content inside the default slot.

`html
style="width: 100%; height: 100%"
v-slot="{width, height}"
>

:style="{flexDirection: (width > height) ? 'row' : 'column'}"
style="display: flex"
>