[enraged_camel]

I use single-page components in Vue and write templates like this:

  <template>
      <div>
          <h2>{{ title }}</2>
      </div>
  <template>

  <script>
    export default {
        data() {
            return {
                title: "Hello world"
            }
        }
    }
  </script>

Works well in my opinion. Separates the template into its own section but keeps it inside the same file.

[ng12]

In my mind this is strictly inferior to JSX, which would be:

   export default ({title}) => (
      <div>
         <h2>{title}</h2>
      </div>
   )

The only benefit to the template is if you use fancy features (#each, binding, etc) which is worse because now you have two places where the logic happens.