[Question] single-file-component: Is there a reason for the order (script & template)?

[escapedcat]

In the views (i.e. https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/router/views/home.vue) you start with the script section instead of the template section unlike it's done in most examples and in the official docs.

Is there a special reason for this or is this your personal preference?

[Mike-Loffland]

I have been wondering this as well.

[chrisvfritz]

Great question! 🙂 There are a few reasons:

• When developing, it's very common to be switching back and forth between <script> and <template> (e.g. when adding new props, data, computed properties, etc that are used in the template). It's also very common to switch between <template> and <style> when defining classes. With the <template>, <script>, <style> order, users have to constantly fold or scroll over the <script> for this latter case.
• As per the convention in Vue (and React), the render/template properties are always the last property in the component options. Having <template> after <script> is consistent with this order.
• Most of the interface information (props and model) will always be in JS, near the top of the <script>. Having <script> at the top makes this interface info immediately visible when switching to the file to quickly answer the question, "How do I use this component?"

Does that make sense?

[escapedcat]

Yes, thx @chrisvfritz !
I agree it can be more handy to have the <script> on top of everything else.
Might just be confusing for newcomers who look at the offical docs first and then see this project.
I'll definitely will ask around in my team and see if we are up for a switch.

[chrisvfritz]

@escapedcat I've never seen a project fail due to the SFC tag order, so whatever your team chooses, I'm sure it'll be fine. 😄

[escapedcat]

Haha, yes, I know. It's just another "tabs Vs. spaces" topic :P

[heshamelmasry77]

Great question! 🙂 There are a few reasons:

• When developing, it's very common to be switching back and forth between <script> and <template> (e.g. when adding new props, data, computed properties, etc that are used in the template). It's also very common to switch between <template> and <style> when defining classes. With the <template>, <script>, <style> order, users have to constantly fold or scroll over the <script> for this latter case.
• As per the convention in Vue (and React), the render/template properties are always the last property in the component options. Having <template> after <script> is consistent with this order.
• Most of the interface information (props and model) will always be in JS, near the top of the <script>. Having <script> at the top makes this interface info immediately visible when switching to the file to quickly answer the question, "How do I use this component?"

Does that make sense?

I think you should make a note about this in main page of vue-enterprise-boilerplate because this is confusing. Please state that it is your own preference and no body is forced to use the same.

[Mike-Loffland]

@heshamelmasry77

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI."

[heshamelmasry77]

@heshamelmasry77

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI."

Thank you for writing this.