👀 Vue WatchResize

A Vue component that watches for size changes on its child nodes and emits an event.

💁🏼‍♂️ Introduction

WatchResize is a Vue component that wraps child nodes in a <div> and watches them for size changes. It uses watch-resize and RxJS observables under the hood to achieve this.

🔗 Installation

Install via yarn (recommended):

yarn add vue-watch-resize

Install via npm:

npm install vue-watch-resize

🛠️ Usage

Importing

In TypeScript or ES6+:

import { WatchResize } from 'vue-watch-resize';

In UMD (using WatchResize via a <script> tag):

const WatchResize = VueWatchResize.WatchResize;
Vue.Component('watch-resize', WatchResize);

Events

Name	Event Type	Description
resize	UIEvent	Fires each time the component child nodes change size.

Vue template example

<watch-resize @resize="myHandleResizeMethod($event)">
  <!-- Child nodes that change size go here -->
</watch-resize>