Utility Functions
Ionic Vue ships with several utility functions that you can use in your application to make certain tasks easier such as managing the on-screen keyboard and the hardware back button.
Router
Functions
useIonRouter
▸useIonRouter():UseIonRouterResult
Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with theuseRouter from Vue.
Customizing Page Transitions
import{IonPage, useIonRouter}from'@ionic/vue';
import{ defineComponent}from'vue';
import{ customAnimation}from'@/animations/customAnimation';
exportdefaultdefineComponent({
components:{IonPage},
setup(){
const router=useIonRouter();
constpush=()=>{
router.push('/page2', customAnimation);
};
constback=()=>{
router.back(customAnimation);
};
return{ push, back};
},
});
Hardware back button on Android
You may want to know if you are at the root page of the application when a user presses the hardware back button on Android.
import{ useIonRouter}from'@ionic/vue';
...
exportdefault{
setup(){
const ionRouter=useIonRouter();
if(ionRouter.canGoBack()){
// Perform some action here
}
}
}
For additional APIs with Vue routing, please refer to theVue Router documentation.
Interfaces
UseIonRouterResult
import{ AnimationBuilder}from'@ionic/vue';
import{ RouteLocationRaw}from'vue-router';
interfaceUseIonRouterResult{
canGoBack:(deep?:number)=>boolean;
push:(location: RouteLocationRaw, routerAnimation?: AnimationBuilder)=>void;
replace:(location: RouteLocationRaw, routerAnimation?: AnimationBuilder)=>void;
back:(routerAnimation?: AnimationBuilder)=>void;
forward:(routerAnimation?: AnimationBuilder)=>void;
navigate:(
location:string| Location,
routerDirection?:'forward'|'back'|'root'|'none',
routerAction?:'push'|'pop'|'replace',
routerAnimation?: AnimationBuilder
)=>void;
}
useIonRouter(): UseIonRouterResult;
The
pushmethod is the equivalent of callingionRouter.navigate(location, 'forward', 'push', animation).The
replacemethod is the equivalent of callingionRouter.navigate(location, 'root', 'replace', animation).
See theVue Navigation Documentation for more usage examples.
Hardware Back Button
TheuseBackButton function can be used to register a callback function to fire whenever the hardware back button on Android is pressed. Additionally it accepts a priority parameter, allowing developers to customize which handler fires first if multiple handlers are registered.
import{ useBackButton}from'@ionic/vue';
...
useBackButton(10,()=>{
console.log('Hardware Back Button was called!');
});
Interfaces
typeHandler=(processNextHandler:()=>void)=>Promise<any>|void|null;
interfaceUseBackButtonResult{
unregister:()=>void;
}
useBackButton(priority:number, handler: Handler): UseBackButtonResult;
See theHardware Back Button Documentation for more information and usage examples.
TheuseBackButton callback will only fire when your app is running in Capacitor or Cordova. SeeHardware Back Button in Capacitor and Cordova for more information.
Keyboard
TheuseKeyboard function returns an object that contains the state of the on-screen keyboard. This object provides information such as whether or not the on-screen keyboard is presented and what the height of the keyboard is in pixels. This information is provided in a Vueref so it will be reactive in your application.
import{ watch}from'vue';
import{ useKeyboard}from'@ionic/vue';
const{ isOpen, keyboardHeight}=useKeyboard();
watch(keyboardHeight,()=>{
console.log(`Keyboard height is${keyboardHeight.value}px`);
});
Interfaces
interfaceUseKeyboardResult{
isOpen: Ref<boolean>;
keyboardHeight: Ref<number>;
unregister:()=>void
}
useKeyboard(): UseKeyboardResult;
See theKeyboard Documentation for more information and usage examples.
Ionic Lifecycles
Ionic Vue provides several lifecycle hooks for thesetup() function to tap into the Ionic Framework page lifecycle.
import{IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave}from'@ionic/vue';
import{ defineComponent}from'vue';
exportdefaultdefineComponent({
components:{IonPage},
setup(){
onIonViewDidEnter(()=>{
console.log('Page did enter');
});
onIonViewDidLeave(()=>{
console.log('Page did leave');
});
onIonViewWillEnter(()=>{
console.log('Page will enter');
});
onIonViewWillLeave(()=>{
console.log('Page will leave');
});
},
});
Pages in your app need to be using theIonPage component in order for lifecycle methods and hooks to fire properly.
See theVue Lifecycle Documentation for more information and usage examples.