title: vue.js 2 - extract html snipped of single file component into standalone file
body: <p>I'm wondering if there is a way to split a <a href="https://v2.vuejs.org/v2/guide/single-file-components.html#ad" rel="nofollow noreferrer">Single File Components</a> file into multiple smaller ones.</p>
  <p>What am I talking about?
  Let's look at this:</p>
  <pre><code>&lt;template&gt;
    ... 
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'my-component',
    };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    ...
  &lt;/style&gt;
  </code></pre>
  <p>That is the way the typical vue.js single file component is built up. As you can see, there is a <code>html</code>-section (content of <code>&lt;template&gt;</code> tag), a <code>javascript</code>-section (content of <code>&lt;script&gt;</code> tag) and a <code>css</code>-section (content of <code>style</code> tag). I was wondering if it is possible to split all of those sections into single files. Let's call them <code>my-component.css</code>, <code>my-component.es6</code> and <code>my-component.html</code> - all 'belonging' to <code>my-component.vue</code>.</p>
  <p>I managed to extract the javascript and the css styling into standalone files like so:</p>
  <pre><code>&lt;template&gt;
    ...
  &lt;/template&gt;
  
  &lt;script src=&quot;./my-component.es6&quot;&gt;&lt;/script&gt;
  
  &lt;style scoped&gt;
    @import './my-component.css';
  &lt;/style&gt;
  </code></pre>
  <p>This works just fine. Now I'm just left with the <code>html</code>-section. <strong>Is there a way to extract this one also?</strong></p>
  <h2>Why?</h2>
  <p>I like to have a clear code separation and this is the only way to keep the 'code-mixing' to a minimum within the <code>my-component.vue</code> file.</p>