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.

[MiniOcean404]

+1

[Smart-Ace-Designs]

I was also able recreate this problem by closing all open files in VSCode, leaving just the welcome screen and restarting VSCode. When you then try to open any Vue or TS file after the restart, the TS and intellisense fails for any file opened during that session. If you then leave that Vue or TS file (or even something like a JSON file) open in the editor with focus and then restart VSCode - then the TS and intellisense works immediately for that file that is open an all subsequent files opened. Its only if NO file is open and just the welcome screen is present, does it fail for me when VSCode opens. And since that is the case with a new project (the welcome screen is displayed by default), as the OP describes, that matches what I am seeing.

To trigger the problem (in my experience):

1. Open an existing Vue/Nuxt project is VSCode. Close all files that are open so that only the welcome screen is showing.
2. Close VSCode
3. Reopen the project is VSCode - should default to the welcome screen since that was only thing open when last closed.
4. Open a Vue or TS file.
5. Extension loads in bottom right of VSCode...but then fails with symptoms described by the OP.

Maybe this is already a known issue...but figured I would mention it.

[Smart-Ace-Designs]

So this might be a potential workaround for a new Vue project, assuming you are opening VSCode from the command line:

code . src/App.vue

Seems like opening a Vue file when VSCode opens, such as after creating a new project, achieves the same affect as having an existing file already open in the editor.