Description
🧠 Problem Statement
In large-scale enterprise applications, separating concerns is critical. Vue's Single File Components (SFCs) provide a convenient, self-contained format, but as projects scale, this tight coupling of markup, logic, and styles can become a liability. Teams often prefer to decouple these responsibilities to improve collaboration, code organization, and long-term maintainability.
However, Vue's current tooling lacks robust IntelliSense, auto-completion, and type-checking for HTML templates stored separately from their .vue files. This creates friction in projects that prioritize modularity, reducing developer confidence and productivity.
💡 Why External Templates Matter
While the SFC format is convenient for small to medium-sized projects, it introduces challenges at scale:
- File Bloat: Large, monolithic files are harder to navigate and maintain.
- Team Collaboration: Decoupling templates allows designers and UI-focused developers to work independently without touching business logic.
- Scalable Code Organization: Clearly defined file structures reduce cognitive load and improve long-term maintainability.
Decoupling templates into .html files can significantly enhance project structure by:
- Simplifying component logic.
- Promoting clear separation of concerns.
- Easing onboarding for new team members.
For example, complex UI components with deeply nested structures or dynamic layouts benefit greatly from isolated templates, reducing the mental overhead of managing interleaved logic and markup.
⚠️ The Core Issue
Currently, Volar and Vue Language Tools lack critical features for external HTML files linked to Vue components, including:
- No auto-completion for variables, props, or reactive state.
- No linting for
v-if,v-for, or other directives. - No TypeScript context inference, leading to runtime surprises and reduced developer confidence.
This gap significantly impacts the productivity and reliability of large-scale projects that adopt this architecture.
🔥 Why This Matters
As the frontend ecosystem evolves, frameworks are expected to accommodate a wide range of architectural choices. Angular and Svelte already provide robust support for external templates, making this a competitive gap for Vue. This feature would:
- Reduce context switching for developers.
- Improve confidence in large, complex components.
- Align Vue more closely with modern enterprise development needs.
By embracing this flexibility, Vue can strengthen its position as a top choice for both startups and large-scale enterprise projects.
🙏 Conclusion
We appreciate the hard work of the Vue core team and believe that addressing this gap will significantly improve the developer experience for many users. Thank you for considering this feature request.