Ionic 4 + VueJS how to use ion-alert-controller

Ionic Framework
1

A method I have in vue component

export default {
  name: 'airport',
  methods: {
   async showDialogAlert(){
     const alertController = document.querySelector('ion-alert-controller');
       await alertController.componentOnReady();

       const alert = await alertController.create({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
       return await alert.present();
   }
  }
}

Error occurs when i trigger showDialogAlert

<ion-button v-on:click="showDialogAlert">Default</ion-button>

Uncaught (in promise) TypeError: Cannot read property 'componentOnReady' of null
    at VueComponent._callee$ (Airport.js?3dca:10)
    at tryCatch (runtime.js?96cf:62)
    at Generator.invoke [as _invoke] (runtime.js?96cf:296)
    at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
    at step (asyncToGenerator.js?3040:10)
    at _next (asyncToGenerator.js?3040:25)
    at eval (asyncToGenerator.js?3040:32)
    at new Promise (<anonymous>)
    at VueComponent.eval (asyncToGenerator.js?3040:5)
    at VueComponent.showDialogAlert (Airport.js?3dca:33)
2

How is this component created ‘ion-alert-controller’ ? alertController is always null.

3

I got it working if I add this compoent in the template like this

<ion-alert-controller></ion-alert-controller>

Is this the right way and should I put this element in App.vue so that it is available for all components ?

4

Are you supposed to use document.querySelector directly in Vue like that? I thought a main point of a framework was to not use window and document directly. But I don’t know Vue.

5

@shashwattripath yes that’s how I got it to work too, and I put it in App.vue just inside ion-content to have it available on all pages, then I put the method in using the Vue mixin functionality so it is available globally

Agree with @AaronSterling though, there should be a way to do this without resorting to document.querySelector

6

My guess is that this should work, or sonmething very close to it will work, since the Ionic 4 components are all built in Stencil.

https://www.npmjs.com/package/stenciljs-in-vue

7

Access the element via VueJS’s ref$ attribute.
More info: https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs