Vue-Official does not autosuggest component props in VSCode while using with Laravel and TS

[AnzyRoman]

Vue - Official extension or vue-tsc version

2.0.28

VSCode version

1.91.1

Vue version

3.4.0

TypeScript version

5.5.4

System Info

WSL:
System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 2.04 GB / 5.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 9.6.0 - /mnt/c/Program Files/nodejs/pnpm

WINDOWS:
  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 4.95 GB / 15.87 GB
  Binaries:
    Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.6.3 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Steps to reproduce

1. Creating new project with Laravel Breeze + Vue with TS or with JS and adding TS manually https://laravel.com/docs/11.x/starter-kits
2. Opening it with VScode with Vue-Official installed

What is expected?

Custom component coloring and prop autosuggestion.

What is actually happening?

Custom components don't change their color. Typescript works fine.

And autosuggestion doesn't work:

Link to minimal reproduction

https://github.com/AnzyRoman/example-laravel

Any additional comments?

I opened the same project in phpStorm and there were no issues with language tools. There are no issues with in clean Vue TS, NuxtTS or Beeze + Vue JS projects in VSCode.

[GTorreil]

We are experiencing something similar without Laravel (i.e; "pure" vue project). Props autocomplete and inlay hints for missing props are not working. Typescript works just fine though. I'll be happy to help if I can provide useful details !

[AnzyRoman]

Ok i have a clue. I tried to manually scaffold laravel breeze like project. Everything was working until I added the custom types from laravel project. The issue in laravel project is exacly about the declaration:

declare module "vue" {
  interface ComponentCustomProperties {
    route: typeof ziggyRoute;
  }
}

[KazariEX]

Please check if there are any declare module "@vue/runtime-core" in your project and drop them or modify to declare module "vue" as a temporary solution.

[AnzyRoman]

Thanks for the comment, laravel project doesn't have any declare module "@vue/compiler-core" but temporary solution was to change declare module "vue" to declare module "@vue/runtime-core". I didn't test this solution yet, and don't know how it will impact the project and Vue-Official integration. But at a glance it seems to work.

[KazariEX]

I made a mistake, should be runtime instead of compiler