feat: add volar support to ionic vue

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

With Volar you get the best TypeScript support for Vue 3 in VSCode (better than Vetur). Including templates.

For regular Vue 3 components this works:

But for Ionic Vue components this doesn’t work:

Expected Behavior

For the collapse prop of ion-header I would expect to see collapse?: 'condense' | 'fade' as the typing and get errors when I enter something else. Plus I would expect to see the docblock containing “Describes the scroll effect that will be applied to the header.”.

I know I can use Vetur (which uses those Vetur json files), but Volar is much better for Vue 3 and has <script setup> support which I would like to start using.

Steps to Reproduce

• Use Volar in VSCode (make sure Vetur is disabled)
• Navigate to an Ionic Vue project (see code reproduction url)
• Go to a .vue SFC file
• Hover over props of a Ionic component in the template
• Trigger autocomplete/intellisense

Code Reproduction URL

https://github.com/elwinvaneede/ionic6-volar

Ionic Info

Ionic:

   Ionic CLI : 6.16.3

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.1) : 1.3.0

System:

   NodeJS : v14.16.0
   npm    : 6.14.11
   OS     : macOS Monterey

Additional Information

I think I’ve found the cause, through my work on the Graphite Design System. But I might be wrong of course.

The @ionic/vue package has vue: 3.0.0 in the package-lock.json, instead of the latest Vue 3 version (3.2.21 at the time of writing).

When I use the latest vue version in @graphite/vue I do get the expected typing through Volar, but also a lot of false type errors, which makes it unusable in Volar:

When I use exactly vue: 3.0.0 in @graphite/vue the type errors go away so it makes it at least usable in Volar, but I also don’t have any typings (just like Ionic Vue):

[liamdebeasi]

Great! There was a fix in Vue 3.0.1 that updated the default values of the props from any to {} which likely contributed to this issue being resolved (https://github.com/vuejs/core/commit/6aa2256913bfd097500aba83b78482b87107c101).

Ionic Vue was still being built with Vue 3.0.0, so we did not get to take advantage of that fix until we updated the dev dependencies in https://github.com/ionic-team/ionic-framework/commit/198f41803b3217ef7183c5d17bec5c2a276abeae.

I am going to close this as the issue appears to be resolved.

[aaronksaunders]

wondering if this is going to be resolved? It does make it quite difficult to use with the latest ionic vue release

    "@ionic/vue": "6.1.10",
    "@ionic/vue-router": "6.1.10",
    "core-js": "^3.6.5",
    "vue": "3.2.37",
    "vue-router": "4.0.16"