How do I pass a template in via a mixin with VueCLI/Typescript

I am migrating a Vue 2 project over to Vue CLI with Typescript and am running into an issue with implementing a mixin that also has a template it passes in for the parent to use. I have been troubleshooting this for a few days and could not find what I was doing wrong or missing. Im hoping someone could lend me a hand on this. If i left out any relevant information I will be happy to add more.

Parent.vue (Only has a script tag)

<script lang="ts">      import {Options, mixins} from 'vue-property-decorator';      import Foundation from '@/mixins/mixin-file';        @Options({          components: {          },      })      export default class Designer extends mixins(Foundation) {      }  </script>  

mixin-file.ts

import {Vue, Options} from 'vue-property-decorator';    @Options({    components: {    },    template: `      <div>        <p>Test</p>      </div>    `  })  export default class Foundation extends Vue {  }    

Error Message

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Component is missing template or render function.     at <Anonymous query=undefined onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >     at <RouterView>     at <Design onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >     at <RouterView>     at <Navigation key=1 >     at <App>  

Im running "vue-property-decorator": "10.0.0-rc.3", to allow compatibility with Vue CLI 4.5.0 which everything else has been working fine

Thank you!

https://stackoverflow.com/questions/67309753/how-do-i-pass-a-template-in-via-a-mixin-with-vuecli-typescript April 29, 2021 at 09:06AM