Ugh, we've seen people stumble into this over and over again 🤦

Do these instructions not work? Maybe we should put this in the HelloWorld template with bold fonts?

With the vuedx TypeScript plugin (which only works if VSCode is using project local TypeScript version) it should be able to resolve types for *.vue imports.

Actually it is mentioned in the welcome screen as well: https://github.com/vitejs/vite/blob/main/packages/create-app/template-vue-ts/src/components/HelloWorld.vue#L24

I really don't know how to make this more prominent.

I always have that setting in my vscode defaults that I add to my repos.

you're right, it works without the shim with VueDX.
But doesn't work with Vetur or Volar:

And I assume most people still use Vetur as the de facto default extension. Others use Volar as it has the best script setup suppport right now.

Are Volar and VueDX comaptible to be used side by side?

ah, you mean the vuedx plugin in tsconfig.json?

My bad. All my projects were created before the template existed / created without the template in a monorepo where the tsconfig was added by me manually to the project root.

Will test it out.

Ok, it works fine after I added the plugin to my project's tsconfig.json.

We probably should mention this plugin in the docs and/or the readme for the vite-vue plugin?

Not everyone might start from a template, or, as in my case, doesn't create the template in a project root, i.e. a monorepo package. So the tsconfig.json might still exist in a workspace package folder, but not necessarily in the project root's tsconfig that's picked up by the IDE.