A Vue container that supports the resize event.
npm install @seregpie/vue-resize-sensorA Vue container that supports the resize event.
Works for Vue 2 & 3.
- Vue Demi
``shell`
npm i @seregpie/vue-resize-sensor
---
`javascript`
import VueResizeSensor from '@seregpie/vue-resize-sensor';
`html
`
The component is globally available as VueResizeSensor.
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
v-slot="{width, height}"
>
:style="{flexDirection: (width > height) ? 'row' : 'column'}"
style="display: flex"
>
---
Capture the
resize event.`html
``javascript
methods: {
onResize({width, height}) {
// handle resize
},
},
`---
The component renders a
element by default. You can change the element that is rendered with the tag attribute.`html
``