[uallo]

> It means that, instead of being able to rely on existing tools for type checking & proper IDE support (like React does), you need custom tools for that custom file format.

React has (but does not require) JSX. It introduced a new file format: jsx or tsx. JSX is not valid JavaScript syntax. Hence, tooling needs explicit support for JSX. For an editor/IDE, that means it needs to add a relatively easy new syntax and a couple of custom React attributes. Obviously, there is a little more to add React support to an IDE, but this is the very first step.

Vue has (but does not require) single-file components. It introduced a new file format: vue. Vue files are already valid HTML syntax. For an editor/IDE, that means it does not need new syntax but only a couple of custom Vue attributes. Obviously, there is a little more to add Vue support to an IDE, but this is the very first step.

PS: Vue 3 has great TypeScript support.

[robertoandred]

Vue files are absolutely not valid HTML.

[CharlieDigital]

Template, script, and style are all valid tags.

[codethief]

Sure but that is as helpful as saying a Word document (.docx) is a valid ZIP file. The tags in Vue files are merely containers of the actually interesting stuff.

[runarberg]

What matters for most (all?) tools is that the file is a valid HTML syntax. Most (all?) tools don’t care if the document it self is valid HTML. I don’t think I’ve used a single developer tool which stops working if I remove the <title> tag, nest <a> elements or even insert a self closing <div /> tag.

[codethief]

I think we're completely talking past each other. I was talking about type checking of TS, template and SCSS code inside a .vue file.

[uallo]

> A Vue SFC is syntactically compatible with HTML.

https://vuejs.org/api/sfc-spec.html

[robertoandred]

No, Vue’s template attributes are not valid html

[uallo]

Vue uses @:[]. in their attributes and these are valid HTML attribute syntax. HTML attribute syntax only disallows SPACE"'>/= and some specific code points. Everything else is valid syntax.

https://vuejs.org/guide/essentials/template-syntax.html

https://html.spec.whatwg.org/#attributes-2

[moritzwarhier]

This is not the point, the point is if they are valid JavaScript or TypeScript.