Separate vue component into : *.ts and *.html

[redplane]

Hi,

I'm using vue-cli 3 and typescript to make my own application.
Everything seemed to be fine until I separated my module into parts: template file and logic file.
I have a component like this:

• master-layout.component.ts

@Component({
    name: 'master-layout',
    template: require('html-loader!./master-layout.component.html')
})
export default class MasterLayoutComponent extends Vue {
}

• master-layout.component.html

<div>
    <router-view/>
</div>

Actually, when this component was combined into one *.vue file, it ran smoothly.
But I want to separate the module into 2 parts because in future, code can be longer and longer, therefore, it is hard to track the issue if available.

When I ran the application after changing my code like above, one error was thrown to me:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Can anyone help ?

Thanks,

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[Justineo]

You should still use your .vue file as entry point of a component and include a script tag with src attribute pointing to the separated script file.

[viT-1]

@Justineo It is not true. Nowadays we can testing vue components without .vue files but vue-class-component with imported template (by html-loader-jest not jest-transform-stub).

[rhengles]

For anyone else coming here from search to separate your components into script, template and style files, I have a working solution in this PR:

#8807

See also the rationale in this issue:

#8106