{"id":21033166,"url":"https://github.com/josephuspaye/vue-resize-detector","last_synced_at":"2026-04-28T13:06:07.982Z","repository":{"id":40847817,"uuid":"246287716","full_name":"JosephusPaye/vue-resize-detector","owner":"JosephusPaye","description":"šŸ”· Detect and handle element size changes in Vue using ResizeObservers for optimal performance.","archived":false,"fork":false,"pushed_at":"2022-12-12T04:40:43.000Z","size":1775,"stargazers_count":3,"open_issues_count":22,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-20T15:48:43.058Z","etag":null,"topics":["createweekly","javascript","resize-observer","vue"],"latest_commit_sha":null,"homepage":"https://vue-resize-detector.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JosephusPaye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-10T11:52:45.000Z","updated_at":"2023-03-08T04:13:59.000Z","dependencies_parsed_at":"2023-01-27T13:31:32.761Z","dependency_job_id":null,"html_url":"https://github.com/JosephusPaye/vue-resize-detector","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fvue-resize-detector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fvue-resize-detector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fvue-resize-detector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosephusPaye%2Fvue-resize-detector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosephusPaye","download_url":"https://codeload.github.com/JosephusPaye/vue-resize-detector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243475358,"owners_count":20296712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["createweekly","javascript","resize-observer","vue"],"created_at":"2024-11-19T12:52:22.095Z","updated_at":"2025-12-29T14:03:28.802Z","avatar_url":"https://github.com/JosephusPaye.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Resize Detector\n\nšŸ”· Detect and handle element size changes in Vue using [ResizeObservers](https://wicg.github.io/ResizeObserver/) for optimal performance.\n\n[![Promotional screenshot of Vue Resize Detector](./screenshot.png)](https://vue-resize-detector.netlify.com)\n\nVue Resize Detector is based on the excellent [React Resize Detector](https://github.com/maslianok/react-resize-detector/), and uses the [ResizeObserver](https://wicg.github.io/ResizeObserver/) API (automatically polyfilled) to detect when a target element's size changes.\n\nThis project is part of [#CreateWeekly](https://dev.to/josephuspaye/createweekly-create-something-new-publicly-every-week-in-2020-1nh9), my attempt to create something new publicly every week in 2020.\n\n## Demo\n\n\u003chttps://vue-resize-detector.netlify.com\u003e\n\n## Installation\n\n```\nnpm install vue-resize-detector\n```\n\n## Usage\n\n### Use with an event\n\nYou can listen for the `resize` event to access the changing width and height:\n\n```vue\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cResizeDetector observe-width observe-height @resize=\"onResize\" /\u003e\n \u003cp\u003e{{ width }} x {{ height }}\u003c/p\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ResizeDetector from 'vue-resize-detector';\n\nexport default {\n components: { ResizeDetector },\n data() {\n return {\n width: 0,\n height: 0,\n };\n },\n methods: {\n onResize(width, height) {\n this.width = width;\n this.height = height;\n },\n },\n};\n\u003c/script\u003e\n```\n\n### Use with a scoped slot\n\nYou can use a [scoped slot](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) to access the changing width and height:\n\n```vue\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cResizeDetector observe-width observe-height v-slot=\"{ width, height }\"\u003e\n \u003cp\u003e{{ width }} x {{ height }}\u003c/p\u003e\n \u003c/ResizeDetector\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ResizeDetector from 'vue-resize-detector';\n\nexport default {\n components: { ResizeDetector },\n};\n\u003c/script\u003e\n```\n\n### Use a CSS selector for the target\n\nYou can change the element that is watched for size changes by setting the `target` prop to a CSS selector matching your desired element:\n\n```vue\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cdiv id=\"my-target\"\u003eTarget element\u003c/div\u003e\n \u003cResizeDetector target=\"#my-target\" observe-width observe-height @resize=\"onResize\" /\u003e\n \u003cp\u003e{{ width }} x {{ height }}\u003c/p\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ResizeDetector from 'vue-resize-detector';\n\nexport default {\n components: { ResizeDetector },\n data() {\n return {\n width: 0,\n height: 0,\n };\n },\n methods: {\n onResize(width, height) {\n this.width = width;\n this.height = height;\n },\n },\n};\n\u003c/script\u003e\n```\n\n### Debounce size change updates\n\nYou can debounce the rate at which size changes are emitted by setting the `rateLimiter` prop to `\"debounce\"` and setting the `rateLimit` prop to your desired wait time.\n\n```vue\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cResizeDetector\n observe-width\n observe-height\n rate-limiter=\"debounce\"\n :rate-limit=\"500\"\n @resize=\"onResize\"\n /\u003e\n \u003cp\u003e{{ width }} x {{ height }}\u003c/p\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ResizeDetector from 'vue-resize-detector';\n\nexport default {\n components: { ResizeDetector },\n data() {\n return {\n width: 0,\n height: 0,\n };\n },\n methods: {\n onResize(width, height) {\n this.width = width;\n this.height = height;\n },\n },\n};\n\u003c/script\u003e\n```\n\n### Throttle size change updates\n\nYou can throttle the rate at which size changes are emitted by setting the `rateLimiter` prop to `\"throttle\"` and setting the `rateLimit` prop to your desired wait time.\n\n```vue\n\u003ctemplate\u003e\n \u003cdiv\u003e\n \u003cResizeDetector\n observe-width\n observe-height\n rate-limiter=\"throttle\"\n :rate-limit=\"500\"\n @resize=\"onResize\"\n /\u003e\n \u003cp\u003e{{ width }} x {{ height }}\u003c/p\u003e\n \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport ResizeDetector from 'vue-resize-detector';\n\nexport default {\n components: { ResizeDetector },\n data() {\n return {\n width: 0,\n height: 0,\n };\n },\n methods: {\n onResize(width, height) {\n this.width = width;\n this.height = height;\n },\n },\n};\n\u003c/script\u003e\n```\n\n## API\n\n### Props\n\n| Prop | Type | Default | Description |\n| ------------------ | --------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `target` | [DOM Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or String | `undefined` | The target element or CSS selector string of the target element to watch for size changes. If not set, the component's immediate parent in the DOM will be used as the target. |\n| `observeWidth` | Boolean | `false` | When `true`, the component observes changes to the target element's width, and emits the `resize` event when the width changes. |\n| `observeHeight` | Boolean | `false` | When `true`, the component observes changes to the target element's height, and emits the `resize` event when the height changes. |\n| `skipOnMount` | Boolean | `false` | When `true`, the component skips emitting the `resize` event when it is mounted. |\n| `rateLimiter` | String | `undefined` | The function to use for limiting the rate at which size change events are emitted. One of [`\"debounce\"`](https://lodash.com/docs#debounce) or [`\"throttle\"`](https://lodash.com/docs#throttle). When `undefined`, the `resize` event is emitted on every animation frame. |\n| `rateLimit` | Number | `1000` | The rate limit wait time, in milliseconds. Used together with the `rateLimiter` prop. This value is passed to the [`debounce`](https://lodash.com/docs#debounce) or [`throttle`](https://lodash.com/docs#throttle) function as the `wait` parameter. |\n| `rateLimitOptions` | Object | `undefined` | Additional options to pass to the [`debounce`](https://lodash.com/docs#debounce) or [`throttle`](https://lodash.com/docs#throttle) function, in the shape of `{ leading: bool, trailing: bool }`. Used together with the `rateLimiter` prop. |\n\n### Events\n\n| Event | Description |\n| -------- | --------------------------------------------------------------------------------------------------------------- |\n| `resize` | Emitted when the target element size changes. The handler is called with the new width and height as arguments. |\n\n### Slots\n\n| Slot | Description |\n| --------- | ----------------------------------------------------------------------------------------------------------------------- |\n| (default) | The default slot. Can hold any content with a single root element, and is passed the `width` and `height` as arguments. |\n\n## Contributing\n\nSee [contribution guide](CONTRIBUTING.md).\n\n## Licence\n\n[MIT](LICENCE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Fvue-resize-detector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephuspaye%2Fvue-resize-detector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephuspaye%2Fvue-resize-detector/lists"}