Cannot read .vue files of external packages

[hard peak]

Hi @civic hatch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It looks like Vite/Nuxt isn’t transforming .vue files when they come from an external package path (installed via file:), so Node tries to load them directly and errors on the unknown “.vue” extension. In Nuxt, third‑party SFCs should be registered through Nuxt’s component system so they’re compiled by Vite.

• Use a Nuxt module and register the component with addComponent so Nuxt auto‑imports and compiles it (avoid importing the .vue file directly at runtime). Example from the docs: addComponent({ name: 'MyAutoImportedComponent', filePath: 'my-npm-package' }) (you can target your package entry or a compiled export rather than a raw .vue path) (addComponent).
• If you maintain the external package, consider exposing components via a Nuxt module that calls addComponentsDir so consumers can load SFCs from node_modules while ensuring Nuxt compiles them (Library Authors).
• Alternatively, in the consuming app register components from an npm package via a local module using addComponent (same as above) (Custom directories → npm Packages).

If you directly import a .vue file path from node_modules (especially via file: tarball), Nuxt/Vite may not treat it as a component entry and Node will hit the raw .vue file, causing the “Unknown file extension” error. The docs do not mention a specific Vite option for enabling raw .vue loading from external tarballs; they recommend registering components through addComponent/addComponentsDir so Nuxt’s pipeline compiles them. If this still fails only with file:, prefer workspace: during development or publish/install the package normally so Nuxt can resolve it through node_modules as expected. The knowledge sources do not explicitly cover a Vite config flag to fix file:-installed SFC paths.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: