# Resize

The resize event (opens new window).

# WIP

# State

The useOnResize function exposes the following reactive state:

import { useOnResize } from "vue-composable";

const { height, width } = useOnResize();
State Type Description
height Number element height
width Number element width

# Methods

The useOnResize function exposes the following methods:

import { useOnResize } from "vue-composable";

const { remove } = useOnResize();
Signature Description
remove Manually removes the event listener

# Example

Window Resize

height:

width:

# Code

<template>
  <div>
    Window Resize
    <p>height: {{ height }}</p>
    <p>width: {{ width }}</p>

    <button @click="remove">remove</button>
  </div>
</template>

<script>
import { reactive, ref } from "@vue/composition-api";
import { useOnResize } from "vue-composable";

export default {
  name: "on-resize-example",
  setup(_) {
    const { height, width, remove } = useOnResize(document.body);

    return {
      height,
      width,
      remove
    };
  }
};
</script>