🛠️ Fixing "Cannot Find Module '.vue'" in Vue 3.5 with Vite and TypeScript

If you're building a Vue 3.5 project with Vite and TypeScript, you might run into this frustrating TypeScript error: Cannot find module '../views/ChatView.vue' or its corresponding type declarations.

This usually happens when TypeScript doesn't understand .vue files by default — but don't worry, the fix is simple.

In this post, I’ll show you how to resolve it by adding a type declaration for Vue files.

---

❓ Why Am I Seeing This Error?

TypeScript is strict about types and doesn’t natively know how to interpret .vue single-file components. While Vite and Vue do most of the work, you still need to explicitly tell TypeScript how to handle .vue imports.

---

✅ The Fix: Create a Vue Module Declaration

To solve this, you'll add a special file to declare how .vue files should be treated.

📄 Step 1: Create a vue.d.ts file

In your src/ folder or project root, create a file named: src/vue.d.ts

✍️ Step 2: Paste This Code

declare module '*.vue' { import { DefineComponent } from 'vue'; const component: DefineComponent<{}, {}, any>; export default component; }

This tells TypeScript:

“Whenever I import a .vue file, treat it as a Vue component using the DefineComponent type.”

🔁 Step 3: Restart Your Dev Tools

🔄 Restart your Vite dev server: npm run dev

Note: What’s the .d.ts? .d.ts means “declaration file.” It doesn’t contain any executable code — just type definitions. It helps TypeScript understand file types like .vue, .json, .css, etc., which are not JavaScript modules by default.