Split js out from Vue SingleFileComponent

Just getting started with VueJs, loving the ease of functionality but hating that the js in my vue files aren’t autoformatted or bracketing paired so I split the js out to a separate file but I got

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

Reading around I found suggestions re providing a render instead of string html template so I’ve stripped right back to

vue init webpack splitvue

This produced a main js with

new Vue({
el: ‘#app’,
render: h => h(App)
})

and an hello.vue with a script of

export default {
name: ‘hello’,
data()
{
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}

Moving this javascript out to an added Hello.Js and referencing via

script src=“Hello.js”

…and I’m back to the Failed to mount component: template or render function not defined.

https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns states that it’s ok to split the js out. What am I missing?

FWIW I’ve opened an issue with VuePack2017 https://github.com/madskristensen/VuePack2017/issues/2 which is getting helpful attention so maybe I’ll soon be able to go back to single components but atm I’m simply not convinced that’s a great restriction to have to live with…

What does your “hello.vue” file look like? Also make sure your script src is a relative path, ie. ./Hello.js

That’s a problem of your IDE, what are you using? works well for me in atom.

Further down you link to vuepack, which seems to indicate you use vscode. in this case, you should probably rather use vetur

This error should not happen, externalizing is supported. How did you do that exactly?

Your snippets of code don’t allow me to realy analyse your problem, can you share the splitvue project you created?

I am using VisualStudio2017 - I tried Atom - wasn’t a fan. FWIW with help I’ve been able to get a fix for VisualStudio VuePack2017 and have submitted a PR https://github.com/madskristensen/VuePack2017/pull/3 so could revert to SingleFileComponents but as a learning exercise I’d like to know what I’ve been doing wrong…

Accordingly as suggested I’ve loaded the sample to https://github.com/9swampy/SplitVueJs;

  • master working as a SingleFileComponent,
  • feature/SplitJs showing the component broken having pulled the js out to a separate file,
  • feature/ImportInsteadOfSrc attempting a fix suggested on StackOverflow

Oh, Now it’s clear, it’s a naming conflict, basically.

when you import it in App.vue, you don’t provide a file extension, so Webpack loads the hello.js file, not the hello.vue file - and that file has no render function, obviously.

2 Likes

Excellent, thx LinusBorg. Correction suggested updating App.vue to

import Hello from ‘./components/Hello.vue’
…fixes it.

Noddy mistake that had me totally beat. Appreciated.

Did this just jump off the page at you from experience or do you have a toolset that directed you to the issue?

The former.