title: Convert single-file .vue components to JavaScript?
body: <p>Is there a tool out there that can take a <code>.vue</code> template like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;Hello, {{ thing }}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() { return { thing: 'World' }; }
    }
  &lt;/script&gt;
  
  &lt;style&gt;
    div { background: red; }
  &lt;/style&gt;
  </code></pre>
  
  <p>And convert it into a <code>.js</code> file, like this:</p>
  
  <pre><code>export default {
    template: `
      &lt;div&gt;Hello {{ thing }}&lt;/div&gt;
    `,
    data() {
      return {
        thing: 'World'
      }
    }
  }
  </code></pre>
  
  <p>(Not sure what magic it'd do with the CSS, but it'd do something.)</p>
  
  <p>I'm trying to use native browser modules, which work great, but I'd like to use the <code>.vue</code> file syntax since it offers some nice things. I'd like to avoid using a bundler like Webpack or Browserify.</p>
  
  <p>I am using Babel. I have the <code>transform-vue-jsx</code> plugin, but that can't handle the <code>.vue</code> format, only converting the JSX.</p>