core: [vue-compat] @click not working on components

.native is listed as being fully supported in compat build.

@liamdebeasi Your app is missing is the second part of the webpack config described in the migration guide - setting the compiler to compat mode:

config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })

After I added this to your repro, click worked.

@inspire22 .native is fully supported by the migration build. If you found a scenario where it doesn’t work as intended, please open a new issue with a reproduction so we can check it out.

@inspire22 The compiler config is not the solution in terms of Ionic.

Ionic exports Vue 3 components. But in compat mode, the app would treat them like Vue 2 components by default. You can do the following:

import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton} from "@ionic/vue";
import {defineComponent} from "vue";

IonButton.compatConfig = {
	MODE: 3
}

Which makes the alert pop up for me - without needing to add .native.

To make this less messy, you might have to come up with a clever wrapper or sth. Idea:

import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton} from "@ionic/vue";
import {defineComponent} from "vue";


// you would of course import this from a module in each of your components
function fixCompMode(components) {
	Object.entries(components).map(([name, component]) => {
		if (!component.compatConfig && name.startsWith('Ion')) {
			component.compatConfig = { MODE: 3 }
		}
	})
}

export default defineComponent({
	name: "Home",
	components: fixCompMode({
		IonContent,
		IonHeader,
		IonPage,
		IonTitle,
		IonToolbar,
		IonButton,
	}),
	methods: {

//...

This will add a very small one-time runtime overhead, but should not be harmful considering Vue 3 itself is faster than Vue 2.