Configure Babel to compile external js file

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?

is there a reason why you separating js from vue? technically *.vue is a js file once compiled by webpack — Ja9ad335h
@Jag so we can separate development, one developer does the html and another does the es6. — sazr
Possible duplicate of Vue template or render function not defined yet I am using neither? — Sandwell
@Sandwell the suggested solutions to the above SO post are to use runtime build which I do not wish to do. — sazr
@JakeM Have considered the possibility of importing using mixins? — Felipe Duarte

Felipe Duarte Felipe Duarte · Accepted Answer · 2018-04-13T12:02:45

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'
        }
    }
}

Configure Babel to compile external js file

1 Answers