vue3-resize
v0.2.0
Published
Detect DOM element resizing
Downloads
17,375
Readme
vue3-resize
Detect DOM element resizing
Sponsors
Installation
npm install --save vue3-resize
Module import
⚠️ You need to include the package CSS:
import 'vue3-resize/dist/vue3-resize.css'
Then import the package and install it into Vue:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3Resize from 'vue3-resize'
createApp(App)
.use(Vue3Resize)
.mount('#app')
Or:
import { createApp } from 'vue'
import App from './App.vue'
import { ResizeObserver } from 'vue3-resize'
const app = createApp(App)
app.component('resize-observer', ResizeObserver)
// or
app.component(ResizeObserver.name, ResizeObserver)
app.mount('#app')
Browser
<link rel="stylesheet" href="vue3-resize/dist/vue3-resize.css"/>
<script src="vue.js"></script>
<script src="vue3-resize/dist/vue3-resize.min.js"></script>
The plugin should be auto-installed. If not, you can install it manually:
app.use(Vue3Resize)
Or:
Vue.component('resize-observer', Vue3Resize.ResizeObserver)
Usage
Add the <resize-observer>
inside a DOM element and make its position to something other than 'static'
(for example 'relative'
), so that the observer can fill it.
Listen to the notify
event that is fired when the above DOM element is resized.
Example
<template>
<div class="demo">
<h1>Hello world!</h1>
<resize-observer @notify="handleResize" :showTrigger="true" />
</div>
</template>
<script>
export default {
setup() {
return {
handleResize ({ width, height }) {
console.log('resized', width, height)
}
}
}
}
</script>