feat: add volar support to ionic vue

[elwinvaneede]

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):

[elwinvaneede]

Fair enough to mark it as a feature request, I found it hard to determine if this is a bug or a feature request, so went with a bug.

I would love this to be considered, since it greatly improves the DX (in my humble opinion), and a DX most Volar users might expect.

Either way, thanks for the great framework.

[elwinvaneede]

FYI: Visual Studio Code + Volar extension is the recommended IDE setup in the Vue docs.

[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"

[elwinvaneede]

I see the @ionic/vue package no longer uses 3.0.0 of vue in their package-lock.json file. So this was to be expected based on my finding.

But it seems to be resolved through this more recent issue and will be available in the next release: #25485

CC: @liamdebeasi

[liamdebeasi]

Yes, the issue in #24169 (comment) should be resolved in Ionic 6.1.11.

[liamdebeasi]

Does this issue still reproduce in Ionic 6.1.11? I tested the sample repo in VS Code + Vetur and this appears to work now:

[danielroe]

I can confirm this is working in nuxt-ionic with Volar.

[elwinvaneede]

I can also confirm it's working with Ionic 6.1.11. Thanks!

[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 (vuejs/core@6aa2256).

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 198f418.

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

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.