Trying to incorporate a local JS file into a single Vue component using a vue-CLI scaffolded application (ver 3.8.2).
Below are the pertinent code snippets:
/path/to/app-vue/src/components/HelloWorld.vue
<template>
<div class="hello">
<Module1/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Module1 from './Module1.vue';
@Component({
components: {
Module1,
}
})
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script>
<style scoped>
</style>
/path/to/vue-app/src/components/Module1.vue
<template>
<div class="module1">
Module2
</div>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import Module2 from './Module2.vue';
@Component({
components: {
Module2,
},
})
export default class Module1 extends Vue {
}
</script>
/path/to/vue-app/Module2.vue
<template>
<div id='demo'>
</div>
</template>
<script>
import foo from '../assets/js/foo';
foo.writeSomething('#demo');
</script>
/path/to/vue-app/src/assets/js/foo.js
function writeSomething(el) {
elem = window.document.getElementById(el);
elem.innerHTML = 'Hello World!';
}
export default {
writeSomething
}
Upon running npm run serve and visiting '/', console errors are displayed:
"export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Module2.vue?vue&type=script&lang=js&'
DevTools console reports:
Uncaught TypeError: _assets_js_foo__WEBPACK_IMPORTED_MODULE_0__.writeSomething is not a function
at eval (Module2.vue?df9f:9)
...
How can I successfully load and utilize functions from local javascript files within a Single File Component?