How to create a custom hook for event listener Vue3 CompositionAPI

Question

I'm relatively new to vue. In react, I can use useEffect in my custom hooks, but I don't have any idea how to do it in vue. I wanted to create a custom hook for listening window resize, Here's how I did it in react.

useDimension.js

import React, { useState, useEffect } from 'react';

function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
    width, height
};
}

export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

useEffect(() => {
    function handleResize() {
        setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
}, [])

return windowDimensions;
}

and I call it in my component like let {width, height} = useDimensions() How do I do it on vue3? compositionAPI?

Does this answer your question? How can I use window size in Vue? (How do I detect the soft keyboard?) — Michal Levý
– Michal Levý, Commented Jan 3, 2022 at 7:57
Since @vueuse is one of the best composable libraries out there and has a function for event listeners too, I suggest you to take a look at that vueuse.org/core/useeventlistener/#usage-example — Nicola Spadari
– Nicola Spadari, Commented Jul 13, 2022 at 14:38

Waleed A.K. · Accepted Answer · 2022-12-10 19:21:37Z

3

 //useDimension.js hook  
import { ref, onMounted, onUnmounted } from 'vue';
const  useDimension=()=> {
  const width = ref(window.innerWidth);
  const height = ref(window.innerHeight);
  const handleResize = () => {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(()=> window.addEventListener('resize', handleResize))
  onUnmounted(()=> window.removeEventListener('resize', handleResize)) 
  return {width,height}
};
export default useDimension;

then you can use it in the App.vue like

<script setup>
import useDimension from './useDimension.js'
const {width,height} = useDimension()
</script>
<template>
  <h1>({{width }},{{ height}})</h1>
</template>

edited Dec 10, 2022 at 19:21

answered Dec 10, 2022 at 7:12

Waleed A.K.

1,66414 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a custom hook for event listener Vue3 CompositionAPI

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related