TypeError when adding Gestures to a Vue2 app

Ionic Framework
1

I have an existing Vue2 app using Typescript and want to add Gestures. I’ve installed v6.1.3 of ionic/vue and ionic/core along w/ ionic 5.4.16.

In my gesture.ts, I create the gesture in:

mounted(){
const removeGesture = createGesture({
el: this.$refs.removeItem,
gestureName: ‘swipe-to-remove’,
});
removeGesture.enable(true);
}

Yarn Serve gives warnings like:
warning in ./node_modules/@ionic/vue/dist/index.esm.js
"export ‘onMounted’ was not found in ‘vue’

Running the app, I get this error:
window.onerror TypeError
webpack-internal:///./node_modules/@ionic/vue/dist/index.esm.js 349 82 Object(…) is not a function

line 349 is:
const IonCheckbox = /@PURE/ defineContainer(‘ion-checkbox’, defineCustomElement$f, […}

Are gestures only availble for Vue 3?
If I upgrade to Vue3 and run in compatibilty mode, will gestures work then? Or do I need to be fully Vue3?

Any insights would be appreciated.
Thanks

2

Both Ionic v5 and v6 require Vue 3 - App Development Support Policy - Ionic Framework API

UPDATE
Looking into it further, I think you could follow the plain Javascript usage here and have it work in Vue 2.

3

Thanks for the response, but I cant seem to get past the warnings and errors.

4

Did you uninstall @ionic/vue and just install @ionic/core?

5

Ah! That gets me past the errors.

I still use:

import { createGesture, GestureDetail } from ‘@ionic/core’;

rather than:

import { createGesture } from ‘https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs’;

Now I can continue on.

Thanks!

1 Like