Upgrading to Vue 3.4

[tanzyy96]

I'm trying to upgrade my Quasar project to Vue 3.4 to try out the new shorthand functions. On the migration docs, they recommended to ensure the following dependencies:

To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:

Volar / vue-tsc@^1.8.27 (required)
@vitejs/plugin-vue@^5.0.0 (if using Vite)
nuxt@^3.9.0 (if using Nuxt)
vue-loader@^17.4.0 (if using webpack or vue-cli)

I tried upgrading my vue to 3.4 and my eslints.
Now when I try the shorthand I will get the error in my VS Code:

v-bind is missing expression.vue(34)
Type '{}' is not assignable to type 'number'.ts(2322)

I noticed that my dependencies aren't up to the required version so I tried to upgrade them one by one to get @vitejs/plugin-vue up 5.0.3 (latest). However, it seems like @quasar/app-vite still relies on 2.3.4. Not sure if this is the cause, but the error still persists.

Is this an issue of waiting for Quasar to support Vue 3.4, or am I missing something out? My project is pretty new so I'm not suspecting an issue of outdated libraries.

[yusufkandemir]

That specific problem is happening because the VS Code extension Volar is not supporting v-bind shorthand yet. See vuejs/language-tools#3830

[tanzyy96]

oh wow okay yes that's spot on the issue. Hope that Volar's support for Vue 3.4 will come soon without needing any additional dependencies to upgrade.

[tanzyy96]

thanks!

[jclaveau]

It seems to be fixed vuejs/language-tools#3830 (comment)