<template> Shows errors on variables despite being defined in <script> with Volar & Typescript

[Luffyyy]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.6.2
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: head, css, plugins, components, buildModules, modules, build
• Runtime Modules: -
• Build Modules: @nuxt/bridge@3.0.0-27238235.a1bcc53

---

Describe the bug

Basically the image, I installed a clean Nuxt 2, converted it to bridge, made a tsconfig as described here #236, added the following (from what I found regarding using Vue 2 with Volar):

    "compilerOptions": {
      "types": [
        "unplugin-vue2-script-setup/types"
      ]
    },
    "vueCompilerOptions": {
      "experimentalCompatMode": 2
    },

Tried installing @vue/runtime-dom and unplugin-vue2-script-setup, but nothing. The error is still there.
I tried defining them via options API too, seems to be broken there too.

I might have done something wrong, I mostly use JS but wanted to try TS at some point. Could also be a Volar issue, but I'm unsure. It works fine with Nuxt 3 or just Vue 3.

Reproduction

https://github.com/Luffyyy/nuxt2-bridge-issue

Additional context

No response

Logs

No response

[danielroe]

I don't believe this is a Nuxt Bridge issue; rather, it's a tooling issue (as <script setup> doesn't have mainstream support for Vue 2).

Consider raising an issue with Volar.

[sduduzog]

I've faced these issue too, I'm yet to setup a reproduction repo, given that I don't find a solution to this soon... It also happens even when just using the composition api for me with the properties being returned from the setup function.

I don't believe this is a Nuxt Bridge issue; rather, it's a tooling issue (as <script setup> doesn't have mainstream support for Vue 2).

Consider raising an issue with Volar.

It's worth noting that I have volar setup and working perfectly (had to also install @vue/runtime-dom) with Nuxt 2 without the bridge

[pi0]

Opening an issue on volar would probably be best.

/cc @johnsoncodehk Please let us know if you expect any special setup to hint volar working with nuxt 2 projects. We can add it to auto-generated types or bridge starter or docs as you wish :)

[johnsoncodehk]

The problem is that .nuxt/tsconfig.json cause to @vue/composition-api types broken.

[danielroe]

@johnsoncodehk Even without the path aliases in tsconfig.json, the same issue shows up... Do you have any more guidance for us?

[johnsoncodehk]

@danielroe After I reinstalled the repro case and built it, there is no problem, because ./.nuxt/tsconfig.json is gone. What can I do to reproduce your problem?

[pleclech]

Hi,
Having the same problem, it seems that the line

  "vue": [
   "node_modules/@nuxt/bridge/dist/runtime/vue2-bridge"
 ],

in ./.nuxt/tsconfig.json break Volar type checking.