Skip to content
A generic component to detect DOM elements resizing
JavaScript Vue HTML
Branch: master
Clone or download
Latest commit 2f6c090 May 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci test(e2e): fix cache Dec 23, 2018
.github Create FUNDING.yml May 23, 2019
build Minify CSS Sep 18, 2017
dist chore: v0.4.5 Dec 21, 2018
docs-src
docs test(e2e): added Dec 21, 2018
src feat: register component as CamelCase Dec 21, 2018
.babelrc Upgrading the babel presets to avoid warning. (#2) Oct 28, 2017
.editorconfig Now using rollup Sep 18, 2017
.eslintignore Initial sources Dec 21, 2016
.eslintrc.js Now using rollup Sep 18, 2017
.gitignore Initial sources Dec 21, 2016
README.md chore: update sponsors Apr 24, 2019
package.json fix: test Dec 21, 2018
yarn.lock chore: upgrade deps Dec 21, 2018

README.md

vue-resize

npm npm vue2

Detect DOM element resizing

Demo - JSFiddle

Become a Patreon

Sponsors

Gold

sum.cumo logo

Silver

VueSchool logo Vue Mastery logo

Bronze


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

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

License

MIT

You can’t perform that action at this time.