Configure Babel to compile external js file - vue.js

Question

So I have a vue component and I am separating each vue component into 2 files. For example;
SomePage.vue:
<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
// Make babel comple this now not at run time
<script type="text/javascript" src="./some-page.js"></script>
some-page.js:
export default {
name: 'contact',
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}
When I run my code I get the following error:
vendor.js:66537 [Vue warn]: Failed to mount component: template or render function not defined.
found in
--->
at src\App.vue
Others have experienced this same error and there is a SO post/solution to this but that posts solution is to either use run and compile mode (which I do not wish to do - we use es6 so not all browsers support this) or to add a empty div to the template, which doesn't solve my problem either.
My project doesn't use run and compile. Just run and I'd like to keep it that way. The problem is that webpack &/or babel is not compiling the template (or maybe the external js).
Is there a way to configure Babel or WebPack or Vue.js to fix this?

Answer 1

Just import through a mixim, example...
SomePage.vue:
<template>
<b-container>
<h1>{{ title }}</h1>
<b-row>
<b-col>
{{ content }}
</b-col>
</b-row>
</b-container>
</template>
<style lang="scss" scoped>
</style>
<script>
import { contact } from '../some-page'
export default {
mixins : [
contact
],
}
</script>
some-page.js:
export const contact = {
data() {
return {
title: 'Contact',
content: 'Foo'
}
}
}