title: Vue.js: Should we put the script or the template first in a single file component for productivity?
body: <p>I am wondering what would be the most efficient way to code in a single file component. I am only talking about productivity as there is no rule regarding how to organize them. <a href="https://v2.vuejs.org/v2/style-guide/#Single-file-component-top-level-element-order-recommended" rel="nofollow noreferrer">As stated in the style guide</a>:</p>
  <blockquote>
  <p>Single-file components should always order template, script, and style tags consistently, with  last, because at least one of the other two is always necessary.</p>
  </blockquote>
  <p>I usually put the template first as it seems quicker to understand what the component does at first sight.</p>
  <p>But at the same time, we spend most of our time writing logic inside the script tags and having the props at the top is kind of appealing.</p>
  <p>Also, one could argue that putting the template and the style next to each other makes things easier when we style components. Sometimes you may have to scroll the whole script tags to get to the right css class.</p>
  <p>What order do you use for productivity and why?</p>