title: Vue3 + typescript + composition api - loading template content externally using .ts files not SFCs/.vue files
body: <p>I'm trying to use the Composition API to <code>defineComponent</code> to define a component instance.</p>
  <p>This is taken from the starting project created using the <code>vue create myapp</code> command.  The script has been put inside an about.ts file, the template content from the About.vue file into into an About.html file (which probably should be a .vue file as its not really html).</p>
  <pre class="lang-js prettyprint-override"><code>    import { defineComponent } from &quot;vue&quot;;
      export default defineComponent({
        name: &quot;About&quot;,
        props: {
          msg: String
        },
        template: require(&quot;./About.html&quot;).default
      });
  </code></pre>
  <p>This is held in <code>about.ts</code>.</p>
  <p>Used in my <code>router/index.ts</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>    import { createRouter, createWebHistory, RouteRecordRaw } from &quot;vue-router&quot;;
      import Home from &quot;@/views/Home.vue&quot;;
      import About from &quot;@/views/About&quot;
      const routes: Array&lt;RouteRecordRaw&gt; = [
        {
          path: &quot;/&quot;,
          name: &quot;Home&quot;,
          component: Home
        },
        {
          path: &quot;/about&quot;,
          name: &quot;About&quot;,
          component: About
        }
      ];
  
      const router = createRouter({
        history: createWebHistory(process.env.BASE_URL),
        routes
      });
  
      export default router;
  </code></pre>
  <p>It doesn't render anything. Looking at the difference between my &quot;about&quot; view and the &quot;home&quot; view it looks like the only difference is the render routine is missing (which is there when you use the .vue file to create your component.</p>
  <p>So let's define one:</p>
  <pre class="lang-js prettyprint-override"><code>    import { defineComponent } from &quot;vue&quot;;
      export default defineComponent({
        name: &quot;About&quot;,
        props: {
          msg: String
        },
        template: require(&quot;./About.html&quot;).default,
        render() {
          return &quot;this is a test&quot;
        }
      });
  </code></pre>
  <p>Adding a render routine, I get the rendered content</p>
  <p>So it seems defineComponent isn't doing what I would expect because I'm using it incorrectly.  It doesn't define a component as it fails to create a render routine unless it is run inside a script tag.  So how can I use externally loaded template content with a typescript module?</p>
  <p>Others are looking at: <a href="https://github.com/vuejs/rfcs/issues/96" rel="nofollow noreferrer">https://github.com/vuejs/rfcs/issues/96</a></p>
  <p>I'm trying to work out the best way to achieve the goal which is a separation of the templates and associated code.  Presumably the vue file is rendered into seperate parts so what function achieves that?</p>
  <p>How do you separate all your components out correctly?</p>