vue-resize

Vue 2.x component to detect DOM elements resizing (event based/no window.onresize)

Detect DOM element resizing.

View demo Download Source

Installation

npm install --save vue-resize

Module import

⚠️ You need to include the package CSS:

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

Then import the package and install it into Vue:

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

Vue.use(VueResize)
JavaScript

Or:

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

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

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>
HTML

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

Vue.use(VueResize)
JavaScript

Or:

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

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 () {
      console.log('resized')
    }
  }
}
</script>

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

GitHub

Akryum/vue-resize

51140

A generic component to detect DOM elements resizing — Read More

Latest commit to the master branch on 12-13-2022
Download as zip