How to make Volar unwrap refs in <template>?

[fabis94]

I'm working on a Nuxt 2 (w/ bridge) project and it's my understanding that Vue unwraps refs when they're accessed through this or in the template. Volar, however, doesn't understand this and reports that the type of Ref values in the template is still a Ref, not the actual unwrapped value.

How do I resolve this?

[fabis94]

Additionally, it doesn't look like refs defined in <script setup> are available in the other <script> block at all. Is this expected behaviour?

[GamerGirlandCo]

seconded. not gonna mince words here, this is fucking annoying

[matthew-dean]

I just ran into this with Nuxt 3 / Volar when using useFetch. I intuited that the problem was that what was returned as Ref within Nuxt was not from the same version of Vue as what Volar detected as Vue.

Here's what I did to fix it:

1. Upgrade nuxt
2. I added "resolutions": { "vue": "~3.4.15" } in my package.json so that all packages were using the same version of Vue. (This only works if you're using PNPM (best) or Yarn (meh) as a package manager, AFAIK.)

Problem was solved.