type error on built-in ionic components (`property 'modelValue' is missing in type '{}'`)

[aaronksaunders]

📚 What are you trying to do?

Getting errors around the Ionic Components that were auto imported

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[danielroe]

The components are recognised, but the types aren't exactly right within Ionic itself.

This is the upstream issue to follow: ionic-team/ionic-framework#24169

[aaronksaunders]

what is interesting is that I only get this issue when the components are preloaded from the nuxt-ionic module, when loading the components in the actual page component, I get no errors and it seems to work fine.

[danielroe]

I still experience it when disabling the auto-imports and manually importing in script setup.

[aaronksaunders]

https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app
this is my project I created a few weeks ago that I just checked and there are no issues as you can see from the screen shot below.

running in the same visual studio code and there are no issues

[danielroe]

Checking your project and adding the current version of @ionic/vue, I get the same errors. (As the issue I linked above indicates, the issue is upstream and not with nuxt-ionic.

[aaronksaunders]

ok... I am not trying to be difficult, I am just saying that there is an issue and I am trying to get to bottom of it, I use Ionic, with vue on multiple projects and I don't have this problem...

What you have here is pretty awesome and I think people will find it beneficial but not with that error.

I have made a video about using Ionic with Nuxt and nowhere in the video do I run into this problem.
https://www.loom.com/share/d13678c6bcd145b7a18cdc60cf9e56bf

I will keep at it and let you know if I find out what the issue is

[danielroe]

Check the issue I linked above - its author suggests it's to do with the version of vue the types are generated from, perhaps mismatching the volar version. You might not be encountering it due to an older version of vue installed in your project, whereas I am encountering it as I am installing @ionic/vue freshly in your project.

[aaronksaunders]

I played around with the version numbers as you suggested and you are correct that is what the issue is. Thanks for sticking with me through this. As I said, I think this is pretty awesome, and looking forward to creating some content around this