Ionic 4 Vue Examples

I’d like to start using Vue for my new Ionic 4 apps, however struggling to find good examples for transitioning from Angular. :thinking:

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?

  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.

  <div id="app">
      <transition name="slide-fade">
.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;

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-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>

Any help answering these questions, and any other Ionic 4 + Vue information would be greatly appreciated!

take a look at this app and see if it answers some of your questions

1 Like

Thanks @aaronksaunders, your example does help explain some things, thank you! :+1:

Other Ionic Vue Samples