Component templating: switch from xml to tagged template strings

[brandon942]

After examining many new UI frameworks 1 templating pattern appears to emerge as the winner more and more consistently: tagged template strings. (ivi, lit, vue-vine, ...)

css` p{ color:blue; } `
html` <button>${text}<button> `
jsx` <button>{text}<button> `
vue` <button v-show="toShow">{{text}}<button> `

Compared to vue's xml based solution the advantages are obvious.

• non-hidden, accessible module scope
• template composition
• no restriction on number of components per file, eliminating the bad SFC pattern entirely
• globally available js logic enabling compile time macros and conditional compilation across the board
• directive based in-template logic no longer necessary

It's similar to jsx but it's more powerful. It allows you to use jsx but it isn't limited to it exclusively. There is no need to deal with certain special file types either. It solves or covers many open issues and feature requests that I have seen.
In light of these advantages I propose adopting tagged template strings as one if not the new way of templating vue components.

[Justineo]

You might be interested in this: https://vue-vine.dev/

[brandon942]

I am. And I have referenced it.

[Justineo]

And I have referenced it.

Oh, I missed that part 😅

That said, I don’t think we’re currently interested in adding an alternative way of authoring Vue components at the API level. IMHO Vue Vine already offers a solid community solution for users who prefer that approach.