Trying to use Ionic Framework with Vue 3

Ionic Framework
1

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

2

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.

3

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

4

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.

5

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 = vNode.context.name
			let warn = `[ionChange:] provided expression '${binding.expression}' is not a function, but has to be`
			if (compName) {
				warn += `Found in component '${compName}' `
			}
			console.error(warn)
		}

    const handleChange = (e) => {
      console.warn(e)
      binding.value(e)
    }

    el.addEventListener('ionChange', handleChange)
	},
}