[HELPS] How Can I use Hardware backbutton in Vue

I try to follow the step on Hardware Back Button.

But apply in mobile to run not working.

There is not much information to go off here which is going to make it hard for others to help out. Do you have a GitHub repo that shows the issue happening? Are you receiving any errors in the console?

I tried it on-device mobile android. When I used the back button return until no history, press again many time the hardware back button, that not showing any error or alert that I set in App.vue.

Edit:
In windows chrome Browser does not show any errors, so that make me very confuse which problem why hardware button not working or something else influrrence.

I am just created the app defaults with tabs for the first time and add hardware back button into app.vue, then using android studio build apk for test on my own device.

Using

ionic cap run android -l --external

not working in emulated device and own mobile android device.

  setup() {
    const ionRouter = useIonRouter();
    useBackButton(-1, () => {
      if (!ionRouter.canGoBack()) {
        alert('You're press hardware back button');
        window.confirm('are you sure wanna exit app?');
        App.exitApp();
      }
    });
  }

sorry, I hoped my conversation make clear you understand, cuz my english not very good. Please, pardon me.

Thanks for the additional information. Are you testing on an emulator or a physical device? Also, what version of Android are you running?

I am using both of them.

Hardware Button: Finally, I got the system call by press the hardware back button in android. But seem like “App.exitApp()” not working.

in App.vue I am setup like this:

import { Plugins } from '@capacitor/core'
import { useBackButton, useIonRouter } from '@ionic/vue'

const { app } = Plugins;

export default {
   setup() {
        const ionRouter = useIonRouter();
        useBackButton( -1, () => {
            if (!ionRouter.canGoBack()) {
                window.confirm('are you sure wanna exit app.')
                app.exitApp();
            }
        }
   }
}

The code above working when I press many times the Android hardware back button, but not on the first page should show up and when I confirm ok, “app.exitApp()” seems like not working.

Have you tried

const { App } = Plugins;

instead of

const { app } = Plugins;

then

App.exitApp();

instead of

app.exitApp();

Plugin names are case sensitive

1 Like

it’s work, Thank you very much. I love the answer.

And I got the problem about the Hardware button problem.

I have 3 tabs, tab1, tab2, and tab3.
When I press tab2 then the next one is tab3, the problem is why the page just returns tab2 and press again, app automatic exit. Normally it should be return tab1…