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=""></script>
<script nomodule src=""></script>
<link rel="stylesheet" href=""/>

<script src=""></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.


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


Per Vue, you should be using kebab-case in a template. So it should be @ion-change. Give that a try and see if it works.

Nop, not working. Also, @ionClick works just fine.

Ok. Unfortunately I am not familiar enough with Ionic to know how to use it without bundling it. Events are working fine for me on the latest version of Vue 3 with it bundled into the app and components being imported into the Vue component.

Hopefully someone else can chime in.

Thanks for your help!

I created a custom directive and it works fine :neutral_face:

const ttChange = {
  beforeMount(el, binding, vNode) {
		if (typeof binding.value !== 'function') {
			const compName =
			let warn = `[ionChange:] provided expression '${binding.expression}' is not a function, but has to be`
			if (compName) {
				warn += `Found in component '${compName}' `

    const handleChange = (e) => {

    el.addEventListener('ionChange', handleChange)