Back button exits app instead of navigating back — Vue + Capacitor + Vite

[JonathasSC]

Hi everyone,

I'm having trouble handling navigation between screens and managing the hardware back button with Capacitor, Vue 3, and Vue Router 4.

The issue I'm facing:

• When navigating between screens, the history does not behave like a stack.
• Pressing the device's back button immediately exits the app, instead of navigating back to the previous route.
• Navigation works fine when using <router-link> or router.push() within the app.

---

Implementation:

useBackButton.js:

import { App as CapacitorApp } from "@capacitor/app";
import { useRouter } from "vue-router";
import { onMounted, onUnmounted } from "vue";

export function useBackButtonHandler() {
  const router = useRouter();

  const backHandler = () => {
    if (router.currentRoute.value.path !== "/") {
      console.log("Página home!");
      router.back();
    } else {
      console.log("Página navegável");
      if (confirm("Deseja realmente sair do app?")) {
        CapacitorApp.exitApp();
      }
    }
  };

  onMounted(() => {
    CapacitorApp.addListener("backButton", backHandler);
  });

  onUnmounted(() => {
    CapacitorApp.removeAllListeners();
  });
}

---

BackButton.vue:

<script setup>
import { useBackButtonHandler } from "../hooks/useBackButton";
useBackButtonHandler();
</script>

<template>
  <div style="display: none"></div>
</template>

---

I included this composable in my App.vue component.
I've already run npx cap sync and npx cap copy, but the issue persists:

The back button closes the app instead of navigating to the previous route.

---

My questions:

1. Do I need to configure something specific in Vue Router to handle navigation like a stack in Capacitor?
2. Is router.back() the right approach here, or should I use a different method?
3. Is removeAllListeners() too aggressive? Should I use a more selective cleanup for this event?
4. Is there any specific configuration needed in AndroidManifest.xml or Capacitor's config to override the default back button behavior?

---

My environment:

• Capacitor/app: 7.0.1
• Vue: 3.4.37
• Vite: 5.4.1
• Vue Router: 4.4.3

---

Any help would be really appreciated!
Thanks a lot in advance! 🙏