How to close ion-fab with Ionic 5 and vue?

Hello, i’m trying to close the ion-fab menu when i click outsideof it.
The component’s doc says there’s a method “close” to close an oppened fab.
Seems simple enough. Yet I can’t find a way to call that method and there’s not a single example on how to do it.
I’ve been trying to do it the standard way by using a ref to the fab and call its close method but i get an error that “close isnt a function”, and indeed, there is no close method declared anywhere if i dig the source of the fab element or list it’s field with a “for in” loop.

I’ve been stuck on this for a whole day and this is driving me crazy to be stuck on something that should be so trivial, I feel like i’ve been searching the whole web in hope of a basic example but everything I found is either out of date or for angular.

i’m using ionic/vue@5.6.13

Has anyone got this problem and found a workaround ?
Is there actually a close method for the fab vue component ? How to call it then ?

here’s what i’m trying to do :


<ion-fab ref="theFab">


export default defineComponent({
    const theFab= ref<null | {
      close: () => null;

    const onClickingOutside = () => {
      theFabRef.value.close() // <====== error, close is not a function, value is not null and a correct reference to the fab component, i can list its props

    return {

Many thanks.

You need to do the following (see here):

1 Like

Thank you very much !