{"id":12561,"library":"vue-resize-observer","title":"Vue Resize Observer Directive","description":"Vue Resize Observer is a lightweight plugin that provides a Vue directive, `v-resize`, to easily detect and react to resize events on any DOM element within a Vue component. It leverages the native `ResizeObserver` browser API for efficient size change detection without the performance overhead of traditional window resize listeners or polling. The package supports both Vue 2 (version `2.0.16` is the latest stable for Vue 2) and Vue 3, with separate installation instructions (`vue-resize-observer@next` for Vue 3). While not explicitly stated, the `@next` tag indicates active development for Vue 3 compatibility, suggesting a potentially faster release cadence for the Vue 3 branch. Its primary differentiator is the direct integration of the `ResizeObserver` API into a straightforward Vue directive, simplifying responsive layouts and element-specific size management.","status":"active","version":"2.0.16","language":"javascript","source_language":"en","source_url":"https://github.com/wangweiwei/vue-resize-observer","tags":["javascript","vue","vue3","plugin","resize","event","observer"],"install":[{"cmd":"npm install vue-resize-observer","lang":"bash","label":"npm"},{"cmd":"yarn add vue-resize-observer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-resize-observer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a default export. Used for global registration with `app.use()` in Vue 3 or `Vue.use()` in Vue 2.","wrong":"import { VueResizeObserver } from \"vue-resize-observer\";","symbol":"VueResizeObserver","correct":"import VueResizeObserver from \"vue-resize-observer\";"},{"note":"Used for CommonJS environments, typically for global registration. This is a default export.","wrong":"const { VueResizeObserver } = require(\"vue-resize-observer\");","symbol":"VueResizeObserver","correct":"const VueResizeObserver = require(\"vue-resize-observer\");"},{"note":"For local registration, import the default export and map it to the directive name 'resize' (without the 'v- prefix') in your component's `directives` option.","wrong":"directives: { 'v-resize': VueResizeObserver }","symbol":"resize","correct":"import VueResizeObserver from \"vue-resize-observer\";\n// ... in a component options object:\ndirectives: { 'resize': VueResizeObserver }"}],"quickstart":{"code":"import { createApp, defineComponent, ref, onMounted } from 'vue';\nimport App from './App.vue';\nimport VueResizeObserver from 'vue-resize-observer';\n\n// main.ts or app.ts\nconst app = createApp(App);\napp.use(VueResizeObserver); // Globally install the v-resize directive\napp.mount('#app');\n\n// App.vue (or any other component)\n<template>\n  <div\n    class=\"resizable-box\"\n    v-resize=\"onBoxResize\"\n    style=\"width: 50%; min-width: 200px; height: 200px; border: 2px solid #3498db; background-color: #ecf0f1; resize: both; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; box-sizing: border-box; padding: 10px;\"\n  >\n    <p>Resize this element!</p>\n    <p>Width: {{ width }}px</p>\n    <p>Height: {{ height }}px</p>\n  </div>\n  <p style=\"margin-top: 20px; font-family: sans-serif; color: #555;\">Drag the bottom-right corner to change its size.</p>\n</template>\n\n<script lang=\"ts\">\nexport default defineComponent({\n  name: 'ResizeDemo',\n  setup() {\n    const width = ref(0);\n    const height = ref(0);\n\n    const onBoxResize = (entry: ResizeObserverEntry) => {\n      // The entry object provides details about the resize event\n      width.value = Math.floor(entry.contentRect.width);\n      height.value = Math.floor(entry.contentRect.height);\n      console.log(`Box resized: W: ${width.value}, H: ${height.value}`);\n    };\n\n    // Initial size capture on mount (ResizeObserver will also trigger on first render)\n    onMounted(() => {\n      // You might need a ref to the element if you want its initial size\n      // directly, but v-resize will also call onBoxResize on first render.\n    });\n\n    return {\n      width,\n      height,\n      onBoxResize,\n    };\n  },\n});\n</script>\n\n<style>\n/* No specific styles needed beyond inline ones for quickstart */\n</style>","lang":"typescript","description":"This example demonstrates how to globally install `vue-resize-observer` in a Vue 3 application and use the `v-resize` directive on a resizable HTML element to listen for and display its width and height changes."},"warnings":[{"fix":"For Vue 3, use `npm install --save vue-resize-observer@next`. For Vue 2, use `npm install --save vue-resize-observer`.","message":"Vue 2 and Vue 3 versions require different installation commands. Installing the wrong version can lead to compatibility issues or errors. Vue 2 uses `vue-resize-observer`, while Vue 3 requires `@next` tag.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For Vue 3, ensure you use `app.use(Plugin)` on your application instance. E.g., `const app = createApp(App); app.use(VueResizeObserver);`. For Vue 2, use `Vue.use(Plugin)`.","message":"Vue 3 changed how global plugins are installed. `Vue.use()` is deprecated for Vue 3 applications using `createApp()`. Using the static `Vue.use` with a Vue 3 app instance will lead to errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"For older browsers, consider a `ResizeObserver` polyfill (e.g., `resize-observer-polyfill`). For SSR, dynamically import components that use `v-resize` only on the client-side or wrap usage in `client-only` blocks. Check `typeof ResizeObserver !== 'undefined'` before use.","message":"The `ResizeObserver` API, which this plugin relies on, is not available in all browser environments (e.g., older browsers) or in server-side rendering (SSR) environments. Using it without a polyfill or conditional rendering in such environments will result in a `ReferenceError`.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure that any style changes or DOM manipulations within your `onResize` handler are either batched, deferred (e.g., using `requestAnimationFrame` or `Vue.nextTick`), or conditionally applied to avoid re-triggering the observer in the same frame.","message":"The `ResizeObserver loop completed with undelivered notifications` warning in the console indicates that a resize event handler is synchronously triggering another resize event, potentially leading to an infinite loop.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install a `ResizeObserver` polyfill for unsupported browsers or Jest. For SSR, ensure code utilizing `ResizeObserver` is executed only on the client-side using conditional rendering or dynamic imports with `ssr: false`.","cause":"The `ResizeObserver` API is not available in the current JavaScript runtime environment (e.g., older browser, Jest test environment, or Node.js during SSR).","error":"ReferenceError: ResizeObserver is not defined"},{"fix":"For Vue 3, call `use` on your application instance: `const app = createApp(App); app.use(VueResizeObserver);`. For Vue 2, `Vue.use(VueResizeObserver)` is correct.","cause":"Attempting to use `Vue.use()` with a Vue 3 application instance created by `createApp()`. In Vue 3, `use` is an instance method, not a static method on the global Vue object for a specific app instance.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Ensure `app.use(VueResizeObserver)` (Vue 3) or `Vue.use(VueResizeObserver)` (Vue 2) is called before mounting your app, or register it locally in your component's `directives` option: `directives: { 'resize': VueResizeObserver }`. Check that the import path is correct.","cause":"The `v-resize` directive was not properly registered or imported. This could be due to incorrect global installation or missing local registration.","error":"Failed to resolve directive: resize"}],"ecosystem":"npm"}