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>