9swampy 9swampy -4 years ago 307
Javascript Question

VueJS WebPack separating javascript from vue

I'm learning VueJs and have followed a tutorial to produce a working app using the vue-cli WebPack template. All works fine; but I'm a bit OCD and hating that VS2017 doesn't format inline javascript in the vue file so:


  • I move the javascript out from
    users.vue
    to a separate file
    users.js
    so...

  • now VS2017 happily formats the js code, highlights bracket pairs etc and

  • include as
    <script src>
    in the original vue.



Now when I
npm run dev
I get:

[Vue warn]: Failed to mount component: template or render function not defined.
(found in <Users>)
vue.esm.js (559,1)


...and obviously the component doesn't load.

Have to be honest I'm at a bit of a loss where to start looking. Am I trying something I shouldn't in splitting out the js, or is there maybe something wrong with the default WebPack set up? I can't believe there's anything wrong splitting out the js as surely when I get beyond tutorials in to real world then reuse and separating from the component has to be possible?

On a side note is there a plugin to format inline javascript in Vue files on VS2017? I've got the VueJs 2017 and CodeMaid extensions but neither has helped formatting code.

I've created an example of the problem at https://github.com/9swampy/SplitVueJs

Answer Source

https://forum.vuejs.org/t/split-js-out-from-vue-singlefilecomponent/8418/5?u=9swampy supplied an answer. To be fair there wasn't enough detail in my question without looking at the GitHub repo; bascially I had introduced a naming conflict by not explictly pointing the vue import to users.vue and it was defaulting to users.js instead.

Hence updating App.vue from

import Hello from './components/Hello'

to

import Hello from './components/Hello.vue'

...fixed the issue.

Doh :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download