Vue Volar template autocomplete/intellisense not working with defineComponent in VSCode

Question

Problem

I cant get syntax highlighting/intellisense to work with volar when using defineComponent. I have:

• installed TypeScript Vue Plugin (Volar)
• installed Vue Language Features (Volar)
• setup take over mode

I've added

"vueCompilerOptions": {
    "optionsWrapper": [
      "(await import('vue')).defineComponent(",
      ")"
    ],

to my tsconfig.

Example

I have a component FooComponent:

<template lang="pug">
div(:id="test.foo.bar")
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {

    const test = {
      foo: {
        bar: "test",
      },
    };

    return { test };
  },
});
</script>

Autocomplete works inside of the defineComponent block:

(i hover over test in defineComponent and it shows the object structure)

image: autcomplete working

but not inside of the template:

(i try to autocomplete test.foo. but bar is not suggested)

image: autocomplete not working

Hovering over test doesnt even show anything.

I have tried everything at this point, i cant get this to work. Does anyone have suggestions on how to solve this?

Answer 1

Try modifying the tsconfig file as follows

"vueCompilerOptions": {
   "target": 2.7, // or 3 (vue version in use)
   "extensions": [
    ".vue"
   ]
}