Reorder blocks in vue SFCs

[silverwind]

The recommended order for SFC blocks is script -> template -> style, which we were violating because template and script were swapped. I do find script first also easier to read because the imports are on top, letting me immideatly see a component's dependencies.

This is a pure cut-paste refactor with some removal of some empty lines.

[delvh]

I think we should certainly start adding a .git-blame-ignore-revs and assigning this PR to it (once it is merged).

[delvh]

Now I'm confused.
How did the diff algorithm suddenly manage to move the <script> instead of the <template> block?

[silverwind]

Maybe this move detection is based on number of lines and it moves the one with less lines?

[wxiaoguang]

I do not see there is a rule for this.

1. According to the questionnaire https://www.reddit.com/r/vuejs/comments/rmeoy7/what_order_do_you_have_your_template_and_script/
   • Major are Template then script
2. According to https://vuejs.org/guide/scaling-up/sfc.html
   • The <template>, <script>, and <style> blocks encapsulate and colocate the view, logic and styling of a component in the same file.
   • <template> also comes first.
3. According to https://vuejs.org/api/sfc-spec.html
   • First <template> then <script>
4. According to https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order
   • <template> then <script> is "good", we are not violating

[wxiaoguang]

I think the <template><script> order is good enough and it is the vast majority

[delvh]

I'm fine with both

[silverwind]

As I said, I find this order more logical because

• Imports are on top, like in every other programming language
• Return value (the template and CSS) is on bottom, similar to React

It does seem the Vue authors agree with me at least, the docs and https://play.vuejs.org both show this order.

dismiss (see comment)

[wxiaoguang]

As I said, I find this order more logical because
* Imports are on top, like in every other programming language
* Return value (the template and CSS) is on bottom, similar to React

I do not have such feeling because Vue SFC is not the same as React/JSX. React uses render to return the DOM, they are embedded into the Component class. But Vue SFC declares the template separately, they look more like HTML code, for HTML code, the intuition is we first have the HTML definition and bind JS code to it.

It does seem the Vue authors agree with me at least, the docs and https://play.vuejs.org both show this order.

See the comment above, they also agree with tempate - script - style

• https://vuejs.org/api/sfc-spec.html
• https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order

Screenshots of Vue official documents with "template - script - style"

---

Update: why the "play.vuejs.org" shows script first, because it is <script setup>, a totally new mechanism in Vue 3.

But we are still using <script> (no setup).

---

Personally I prefer to follow the majority (template - script(nosetup) - style) at the moment, until there are other best practices, while I won't block it. Or use modern Vue 3 (script(setup) - template - style)

[wxiaoguang]

Maybe it's a good start for refactoring legacy <script> to modern <script setup>

[silverwind]

Yes, Composition API is the modern way of writing vue components and to me it very much looks like a react hooks component. Composition API seems to prefer the script > template > style order as well. It seems similar to the Hooks vs. Class components in React, no one writes class components any more today in React.