VueJS WebPack separating javascript from vue

0
votes

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

2
javascriptwebpackvuejs2
Found github.com/vuejs/vueify/issues/35 which is suggesting it should be possible but OP didn't find a fix, it just started working... not exactly helpful resolving :) – 9swampy
Found vuejs.org/v2/guide/single-file-components.html in which official documentation states it's possible (so what am I doing wrong) but recommends against. Not convinced but I'd be happy if the js was formatted automagically. I've tried Atom; but it's no better (or worse) than VS on the formatting front. – 9swampy

2 Answers

0
votes
<template>
//your template
</template>

<script>
import users from './users.js';
export default users;
</script>

This should work with the webpack template.

0
votes

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 :)