rzb / vue-resize

A generic component to detect DOM elements resizing

vue-resize

Detect DOM element resizing

Demo

Installation

npm install --save vue-resize

Default import

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)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Install all the components:

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

Vue.use(VueResize)

Use specific components:

import 'vue-resize/dist/vue-resize.css'
import { ResizeObserver } from 'vue-resize/dist/vue-resize'

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

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

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

<script src="vue.js"></script>
<script src="vue-resize/dist/vue-resize.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)

Source import

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

Vue.use(VueResize)

Or:

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

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

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

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>

---

License

MIT