I’d like to start using Vue for my new Ionic 4 apps, however struggling to find good examples for transitioning from Angular. ![:thinking:]( ":thinking:")
There are a few good tutorials like Using Ionic 4 Components in Your Vue.js Apps and Learning Vue for Ionic/Angular Developers – Part 1, 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 like this.$ionic.modalController?
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.
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?
Any help answering these questions, and any other Ionic 4 + Vue information would be greatly appreciated!
