How to use onClickOutside (vueuse) on two dom elements?

Question

The onClickOutside function from vueuse package can be used to trigger when a click event happens outside the ref:

const imageRef = ref(null)

onClickOutside(imageRef, (event) => {
    state.active = false
})

dom element:

<img ... ref="imageRef"/>

but is there a way to use it on two dom elements? What I want is to trigger the function, when the user clicks outside of two elements. I've tried adding the same ref on two dom elements but the ref just gets overwritten by the second one. Said dom elements are NOT rendered in a v-for loop.

Answer 1

If you want to handle this still via vueuse, there is an option: ignore

<template>
    <img ... ref="imageRef"/>
    <p ... ref="pRef"/>
</template>

<script setup>
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core'

const imageRef = ref(null), pRef = ref(null), state = ref({active: false});

const doSomething = () => {state.value.active = true};

onClickOutside(imageRef, doSomething, {ignore: [pRef]});
onClickOutside(pRef, doSomething, {ignore: [imageRef]});
</script>