Vue3 + typescript + composition api - 使用 .ts 文件而不是 SFC/.vue 文件从外部加载模板内容

Question

I'm trying to use the Composition API to defineComponent to define a component instance.

This is taken from the starting project created using the vue create myapp 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).

    import { defineComponent } from "vue";
    export default defineComponent({
      name: "About",
      props: {
        msg: String
      },
      template: require("./About.html").default
    });

This is held in about.ts .

Used in my router/index.ts like so:

    import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
    import Home from "@/views/Home.vue";
    import About from "@/views/About"
    const routes: Array<RouteRecordRaw> = [
      {
        path: "/",
        name: "Home",
        component: Home
      },
      {
        path: "/about",
        name: "About",
        component: About
      }
    ];

    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    });

    export default router;

It doesn't render anything. Looking at the difference between my "about" view and the "home" 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.

So let's define one:

    import { defineComponent } from "vue";
    export default defineComponent({
      name: "About",
      props: {
        msg: String
      },
      template: require("./About.html").default,
      render() {
        return "this is a test"
      }
    });

Adding a render routine, I get the rendered content

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?

Others are looking at: https://github.com/vuejs/rfcs/issues/96

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?

How do you separate all your components out correctly?

Answer 1

The template and render options are mutually exclusive, so you should remove render . The reason your template isn't appearing is because the template option requires the runtime compiler (it's normally excluded as an optimization, as most users employ precompiled templates). You should see a console warning if you try to use template at runtime without the compiler.

To enable the runtime compiler in a Vue CLI project, set the runtimeCompiler flag :

// vue.config.js
module.exports = {
  runtimeCompiler: true,
}

To require the HTML file into a string for the template option, use raw-loader like this:

export default defineComponent({
  template: require('raw-loader!./HelloWorld.html').default
})

Sticking with SFCs...

Another way to do this is to move the <template> , <script> , and <style> parts into .html , .ts , and .css files respectively, and then import them in the SFC:

<!-- HelloWorld.vue -->
<template src="./HelloWorld.html"></template>
<script src="./HelloWorld.ts" lang="ts"></script>
<style src="./HelloWorld.css"></style>

The app would still import the component as usual:

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Caveat

Splitting files out like this would cost IDE support afforded by Vetur . For instance, in the HTML file, you won't get IntelliSense for props declared in the script file.