Spliting Vue File

Hi guys,
I need help about something little bit annoying. Now I’m still using VueJS 2.5.2 and VueRouter 3.0.1. When my js code too big, I want to split it into 2 files like this:


inside sample.vue I just put this code:

<script src="./sample.js"></script>

and inside router.vue, I use sample.vue as target component.
When running in development (npm run dev), I got this error:

[Vue warn]: Failed to mount component: template or render function not defined.

And the component was not render (just blank screen).
But when I rename sample.js with another name like “sample1.js” and change src inside sample.vue, the component working nicely.
What happened here? Are there ways to use vuefile name for js file?
Thank you.

You left out an important piece of code - the import of the component.

You likely didn’t specify the file extension?

import Sampe from './sample'

Since you have two files called sample, it depends on your buuild systems settings wether it picks sample.js or sample.vue

Solution: explictly define the file extension:

import Sampe from './sample.vue'

Problem solved as your suggestion.

Thank you very much @LinusBorg.