Early, this year, I had the chance to help the GRUSP prepare a base course on Vue.js and a bunch of questions for an HTML test for foreign people approaching coding. The two things apparently seem not linked together apart for the fact that while searching on MDN inspiration for more complex questions for the HTML test I found out some interesting things.
Vue, despite other JS frameworks, really cares about the separation of concerns among HTML, CSS and Javascript which is something that I really appreciate as I never loved so much all that HTML and CSS code inside JSX.
And, just working with it, you can naturally notice that it really loves using things that are already out there in HTML5 in their semantic meaning.
For instance, the tag <template> that Vue.js uses to wrap the component markup, really exists in HTM5 and it has just this meaning: holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. [MDN reference]
That's gorgeous! For a semantic code lover like I am, this is really nice.
Same thing for the tag <slot>: is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. [MDN reference]
As you can see from the documentation, it also comes with the attribute name to name the slot just as it is used in Vue.js.
Both <template> and <slot> are part of the Web Component specification so they perfectly fit the purpose of Vue with no need to invent new elements.
Have you ever noticed this?
And what I also like about Vue.js is the concept that you can really play the game of "inventing" new HTML5 elements. The flexibility that HTML5 gives really suits the purpose: you can definitely think about components as new HTML elements and props as custom tag attributes. The Vue.js Style Guide itself recommends some tips to do it properly: think about the component name as multi-word in order to not conflict with future HTML5 elements (as they will always be one word). And it also give some advices about naming common components used often and unique components all over the app. Regarding the props, as we can think about them as custom attributes and we know that html never use uppercase letters, here's that the Style Guide recommends kebab case for the names used into the template although we can use the camel case in the declaration.
With this in mind you can create new beautiful semantic "elements" as Vue.js components, you can definitely build your own HTML! And I personally believe that having these concepts in mind really helps to build efficient and intuitive components (you don't want to use a veeery long prop name if it has to become a tag attribute, don't you?).
Single File Components (aka SFC) then are the real power of Vue.js, the ones the let you keep separate HTML, joined with the templating, from the JS logic part and the CSS presentation one while keeping it all, in fact, in a single file. Separated but united. It's as beautiful as a song!
This code organization gives the possibility to keep all tidy. You could also decide to keep the JS logic and the style in separate files and then just import them through the src attribute. So basically Vue.js has a lot of flexibility that lets you really decide how your own code should be organized.
It's, of course, for JS lovers but also for HTML and CSS lovers. That's why I like it: I don't have to give up on any of the three :)
Obviously, Vue.js is much more than this but these are the things that instantly made me fall in 💚
