🚀 Support IntelliSense and Type-Checking for External HTML Templates

[SamuelFerreiraJimpisoft]

🧠 Problem Statement

In modern frontend development — especially in large-scale, modular enterprise applications — separating concerns isn't just a nice-to-have, it's essential. Vue's Single File Components (SFCs) have long been positioned as a clean and elegant way to encapsulate markup, logic, and styling. While this works very well for small to mid-sized applications, it can become a liability in large codebases.

SFCs scale poorly in large applications, where dedicated teams often prefer to decouple responsibilities into separate files. This is particularly true for HTML templates, which are often handled by designers or frontend specialists separately from the component logic.

In 2025, we expect frameworks not only to innovate, but to adapt to real-world use cases and architectural demands. Unfortunately, Vue's tooling ecosystem currently lacks IntelliSense, auto-completion, and type-checking support for HTML templates stored separately from their .vue logic files — a crucial feature for productivity and maintainability.

---

💡 Why External Templates Matter

While the SFC format is simple and elegant, it introduces tight coupling:

• Mixing template, logic, and styles in a single file creates overly large files, especially in components with complex templates.
• It reduces the flexibility of delegating template work to designers or UI-focused developers.
• It limits collaboration in environments where teams are organized by concerns (e.g., templates vs. logic).

Decoupling templates into .html files enables:

• Better file organization.
• Clearer division of responsibilities.
• Improved maintainability and readability.
• Easier collaboration across disciplines.

---

⚠️ The Core Issue

Currently, Volar and Vue Language Tools do not provide IntelliSense or type-checking in external .html files linked to Vue components. This includes:

• No auto-completion for variables, props, computed values.
• No linting or validation for v-if, v-for, or other directives.
• No TypeScript support to infer template context.

This is a huge productivity loss and creates unnecessary friction in projects that don’t or can’t follow the SFC pattern strictly.

---

✅ What We’d Like to See

We propose improving support for external HTML templates in the Vue tooling ecosystem by:

1. Providing IntelliSense for ref, reactive, props, and other known context-bound variables in linked .html files.

2. Type-checking directives and expressions within these templates using the context from their corresponding component scripts.

3. Supporting standard patterns like:

   export default {
     template: './vue-is-awesome.component.html',
     setup() { ... }
   }

   or via precompiler / preprocessor pipelines.

4. Even better: a convention or directive to explicitly link .html files to .ts/.js files for full context recognition.

---

🔥 Why This Matters in 2025

Frameworks are evolving. Developer expectations have matured. Vue has always stood out for its ergonomics and developer experience. But this particular limitation holds Vue back from thriving in enterprise and highly modular contexts.

Competing ecosystems (like Angular) offer full template tooling for external HTML files. Vue should aim to be just as flexible — if not better — in serving both individual developers and teams at scale.

---

🙏 Conclusion

This feature would unlock a massive quality-of-life improvement for many Vue teams and reduce friction in larger codebases where modularity is key. We understand that tooling support for this use case might be non-trivial, but it is absolutely worth the investment.

We’d love to hear your thoughts on whether this is feasible and if there's any planned roadmap or workaround in the meantime.

---

Thank you for your amazing work ❤️