\n\n## Sponsors\n\n[](https://guillaume-chau.info/sponsors)\n\n \n\n# Installation\n\n```\nnpm install --save vue3-resize\n```\n\n## Module import\n\n**⚠️ You need to include the package CSS:**\n\n```js\nimport 'vue3-resize/dist/vue3-resize.css'\n```\n\nThen import the package and install it into Vue:\n\n```javascript\n// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport Vue3Resize from 'vue3-resize'\n\ncreateApp(App)\n .use(Vue3Resize)\n .mount('#app')\n```\n\nOr:\n\n```javascript\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { ResizeObserver } from 'vue3-resize'\n\nconst app = createApp(App)\n\napp.component('resize-observer', ResizeObserver)\n// or\napp.component(ResizeObserver.name, ResizeObserver)\n\n\napp.mount('#app')\n```\n\n## Browser\n\n```html\n\n\n\n\n```\n\nThe plugin should be auto-installed. If not, you can install it manually:\n\n```javascript\napp.use(Vue3Resize)\n```\n\nOr:\n\n```javascript\nVue.component('resize-observer', Vue3Resize.ResizeObserver)\n```\n\n# Usage\n\nAdd the `` inside a DOM element and make its position to something other than `'static'` (for example `'relative'`), so that the observer can fill it.\n\nListen to the `notify` event that is fired when the above DOM element is resized.\n\n# Example\n\n```html\n\n
![\"Become](\"https://c5.patreon.com/external/logo/become_a_patron_button.png\"){kind=logo}
\n \n