Newly created Vue app with TS doesn't recognize .vue files

[juilpark]

Vue - Official extension or vue-tsc version

2.2.8

VSCode version

1.98.2

Vue version

3.5.13

TypeScript version

~5.8.0

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M4
    Memory: 176.91 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.local/share/mise/installs/node/22.14.0/bin/node
    Yarn: 4.7.0 - ~/.local/share/mise/installs/yarn/4.7.0/bin/yarn
    npm: 10.9.2 - ~/.local/share/mise/installs/node/22.14.0/bin/npm
  Browsers:
    Brave Browser: 134.1.76.74
    Safari: 18.3.1

package.json dependencies

{
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.0",
    "@types/node": "^22.13.9",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.5.0",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.21.0",
    "eslint-plugin-vue": "~10.0.0",
    "jiti": "^2.4.2",
    "npm-run-all2": "^7.0.2",
    "prettier": "3.5.3",
    "typescript": "~5.8.0",
    "vite": "^6.2.1",
    "vite-plugin-vue-devtools": "^7.7.2",
    "vue-tsc": "^2.2.8"
  }
}

Steps to reproduce

$ yarn create vue@latest
➤ YN0000: · Yarn 4.7.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-vue@npm:3.15.1
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 291.17 KiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 0s 111ms

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  vue-learning
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  TypeScript, ESLint (error prevention), Prettier (code formatting)
│
◇  Install Oxlint for faster linting? (experimental)
│  No

Scaffolding project in /Users/parkjuil/Git/vue-learning/vue-learning...
│
└  Done. Now run:

   cd vue-learning
   yarn
   yarn format
   yarn dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

me@dev vue-learning % cd vue-learning
me@dev vue-learning % yarn
➤ YN0000: · Yarn 4.7.0
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @tsconfig/node22@npm:22.0.0, @types/node@npm:22.13.10, @vitejs/plugin-vue@npm:5.2.2, and 406 more.
➤ YN0000: └ Completed in 2s 229ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ vue-learning@workspace:. doesn't provide vue-eslint-parser (p0ff4a), requested by eslint-plugin-vue.
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.25.1 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 803ms
➤ YN0000: · Done with warnings in 3s 180ms

me@dev vue-learning % yarn format
src/App.vue 44ms (unchanged)
src/assets/base.css 4ms (unchanged)
src/assets/main.css 1ms (unchanged)
src/components/HelloWorld.vue 16ms (unchanged)
src/components/icons/IconCommunity.vue 1ms (unchanged)
src/components/icons/IconDocumentation.vue 1ms (unchanged)
src/components/icons/IconEcosystem.vue 1ms (unchanged)
src/components/icons/IconSupport.vue 1ms (unchanged)
src/components/icons/IconTooling.vue 1ms (unchanged)
src/components/TheWelcome.vue 9ms (unchanged)
src/components/WelcomeItem.vue 4ms (unchanged)
src/main.ts 2ms (unchanged)

me@dev vue-learning % yarn dev

  VITE v6.2.2  ready in 1136 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

after this step, open VSCode with Vue Extension, go to Main.ts

import App from './App.vue'; has a red squiggle under './App.vue'
error is 'Cannot find module './App.vue' or its corresponding type declarations.ts(2307)'

What is expected?

.vue files are recognized by TS

What is actually happening?

.vue files are not recognized by TS

Link to minimal reproduction

No response

Any additional comments?

I'm literally new on Javascript/Typescript, Vue
I came here from Django, Python

I'm just curious there is an error even initial start of Official Document's "Quick Start"
https://vuejs.org/guide/quick-start.html

I watched some simillar issue report in #4118, #4883
Is this situation intended and is there something I need to learn more or set up?

[KazariEX]

Can v3.0.0 (#5261) solve this problem?

[juilpark]

Can v3.0.0 (#5261) solve this problem?

I update a extension to 3.0.0-alpha.2, but error still exist

[KazariEX]

I can't reprocude it, but I'm using pnpm and Windows. Not sure if this is a platform specific issue.

[zhaojjiang]

Check and try to change your Hybrid Mode config.

[johnsoncodehk]

This may be caused by the installation of an incompatible extension, please try the following methods and see if it can resolve the problem:

1. Run the “Extensions: Disable All Installed Extensions for this Workspace” command in VSCode.
2. In the “Extensions” sidebar, right-click “Vue - Official” and select “Enable (Workspace)”.
3. Reload VSCode.

[slow-groovin]

Same problem, not only newly repo, all vue repositories in computer has been affected, solved by:

1. “Extensions” - “Vue - Official” - Disable
2. “Extensions” - “Vue - Official” - Enable

[susanforme]

This is how I triggered the bug. First, I disabled all extensions in the workspace, then enabled vue official. The type successfully appeared in ts, but it failed after restarting vscode. Disabling and enabling plugins again took effect again

[Aaron-Pool]

I can also confirm that for some reason disabling -> reloading vscode -> enabling fixed this issue for me. Very strange. Seems maybe like there's some kind of cached state that only get cleared and correctly regenerated after full disable and re-enable.