Trying to use Ionic Framework with Vue 3

Hello. Im trying to listen to @ionChange from ion-toggle, or ion-select in Vue 3 and its not working. In Vue 2.x works fine for some reason.

Im not importing the components from @ionic/vue, because im not using a bundler. I am trying to use javascript version of the framework inside a vanilla js app bringing Vue 3 from CDN.

Im importing the scripts like this:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<script src="https://unpkg.com/vue@next"></script>

And inside Vue I’m specifing the custom elements from ionic

  const app = Vue.createApp()
  app.config.isCustomElement = tag => tag.startsWith('ion-')
  app .mount('#app')

This works fine, but the problem that I have is that the events from elements are not working.

Ex.:

<ion-toggle @ionChange="someFunc" /> // this wont do anything

This is supposed to work this way? or the custom element wont work if I dont import it from ‘ionic/vue’? In vue2 worked just fine like it is.

There is any workaround to this, besides to working with the bundler and importing?

Thanks

1 post - 1 participant

Read full topic