Custom close button

[en-do]

Hello everyone!
I want to create a custom close button with its own message as native alert. How is this implemented in a component <ClosingConfirmation>

I have this code. But I don't get the native alert, I only get the app closing :(
Please, I need help!

<script setup>
import {
  useWebAppClosingConfirmation
} from 'vue-tg'

const { enableClosingConfirmation, isClosingConfirmationEnabled } = useWebAppClosingConfirmation();

enableClosingConfirmation();

function close() {
  useWebApp().close();
}
</script>

<template>
<button type="button" class="nav-link text-danger px-4 py-3 d-flex align-items-center" @click="logout()">
  close app
</button>
</template>

[deptyped]

Hi! <ClosingConfirmation> uses the close confirmation feature provided by the Telegram API. To implement custom close confirmation, we must somehow prevent the app from closing on the mini-app side. I'm pretty sure that's not possible.

[en-do]

@deptyped I thinking it's a not problem for my app. How init native alert for close confirm in my function with your lib?

[deptyped]

If I understand correctly what you want, a confirmation popup should work for you:

<script setup>
import { useWebApp, useWebAppPopup } from 'vue-tg'

const webApp = useWebApp()
const popup = useWebAppPopup()

function logout() {
  popup.showConfirm("Are you sure?", (yes) => yes && webApp.close())
}
</script>

<template>
  <button @click="logout()">
    Close App
  </button>
</template>

[en-do]

@deptyped, Thanks a lot!
But these are visually different popups :(