I’d like to start using Vue for my new Ionic 4 apps, however struggling to find good examples for transitioning from Angular. 
There are a few good resources like Using Ionic 4 Components in Your Vue.js Apps, Learning Vue for Ionic/Angular Developers – Part 1 and ModusCreateOrg/ionic-vue-examples, but still have lots of questions regarding routing, navigation, transitions, etc.
The documentation doesn’t provide a lot of examples on getting components wired up, for example it has Angular Navigation but does not have the equivalent for Vue.
What’s the best way to show a modal using Vue? Do you access the <ion-modal-controller/> tag?
const modalController = document.querySelector("ion-modal-controller");
await modalController.componentOnReady();
const modal = await modalController.create({
component: 'form-details'
});
await modal.present();
Or is it better to make use of this.$ionic.modalController?
this.$ionic.modalController
.create({
component: FormDetails,
componentProps: {
title: "Form Details"
}
})
.then(modal => modal.present());
What other components are accessible via this.$ionic?
Regarding routes and navigation, what’s the best way to push a new page? In Ionic 3 you’d use NavController but that’s not available in Ionic 4. Or is it?
Looks like one way in Vue.js is using $router like this.$router.push({path:'/forms/1'}) but that doesn’t provide any slide animations. One option is to wrap your <router-view/> in <transition name="slide-fade"><router-view/></transition> to offer some animation, but that’s not the regular Ionic push animation you’d expect.
<template>
<div id="app">
<ion-app>
<transition name="slide-fade">
<router-view/>
</transition>
</ion-app>
</div>
</template>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
Since ion-nav is available in Ionic 4, can that be used as an alternative to the VueRouter? How do you use <ion-nav> in code to push a new page?
How does <ion-router> work when using IonicVueRouter?
<ion-router>
<ion-route url="/tutorial" component="page-tutorial"></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
<ion-route url="/account" component="page-account"></ion-route>
<ion-route url="/signup" component="page-signup"></ion-route>
<ion-route url="/support" component="page-support"></ion-route>
</ion-router>
Any help answering these questions, and any other Ionic 4 + Vue information would be greatly appreciated!
