vue-resize

What is vue-resize?

The vue-resize package is a Vue.js directive that allows you to detect and respond to changes in the size of an element. It is useful for creating responsive components that need to adjust their layout or behavior based on the size of their container.

What are vue-resize's main functionalities?

Resize Directive

The resize directive allows you to bind a method to be called whenever the element is resized. In this example, the `onResize` method will be called, logging the resize event to the console.

<template>
  <div v-resize="onResize">
    Resize me!
  </div>
</template>

<script>
export default {
  methods: {
    onResize(event) {
      console.log('Element resized:', event);
    }
  }
};
</script>

Resize Event

You can also use the `ResizeObserver` directive to listen for resize events on an element. This example shows how to import and use the `ResizeObserver` directive to call the `onResize` method when the element is resized.

<template>
  <div @resize="onResize">
    Resize me!
  </div>
</template>

<script>
import { ResizeObserver } from 'vue-resize';

export default {
  directives: {
    ResizeObserver
  },
  methods: {
    onResize(event) {
      console.log('Element resized:', event);
    }
  }
};
</script>

Other packages similar to vue-resize

vue-resize-directive

The vue-resize-directive package provides a simple directive to detect element resize events. It is similar to vue-resize but focuses solely on the directive aspect without additional features like the ResizeObserver.

vue-resize-sensor

The vue-resize-sensor package offers a component-based approach to detecting element resize events. It provides a `ResizeSensor` component that you can wrap around any element to listen for resize events. This package is more component-oriented compared to vue-resize.

vue-element-resize-detector

The vue-element-resize-detector package is another alternative for detecting element resize events. It uses the `element-resize-detector` library under the hood and provides a Vue.js directive for easy integration. It is similar in functionality to vue-resize but uses a different underlying library.

README

vue-resize

Detect DOM element resizing

JSFiddle

Sponsors

Installation

npm install --save vue-resize

Module import

⚠️ You need to include the package CSS:

import 'vue-resize/dist/vue-resize.css'

Then import the package and install it into Vue:

import Vue from 'vue'
import VueResize from 'vue-resize'

Vue.use(VueResize)

Or:

import Vue from 'vue'
import { ResizeObserver } from 'vue-resize'

Vue.component('resize-observer', ResizeObserver)

Browser

<link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>

<script src="vue.js"></script>
<script src="vue-resize/dist/vue-resize.min.js"></script>

The plugin should be auto-installed. If not, you can install it manually:

Vue.use(VueResize)

Or:

Vue.component('resize-observer', VueResize.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" />
  </div>
</template>

<script>
export default {
  methods: {
    handleResize ({ width, height }) {
      console.log('resized', width, height)
    }
  }
}
</script>

<style scoped>
.demo {
  position: relative;
}
</style>

License

MIT