I have trouble importing an external class into a single file Vue component.
The component looks like this:
<style>
</style>
<template>
<div>
A page
</div>
</template>
<script>
import AClass from './js/aclass.js';
// -----------------------------------------
// I have also tried all the below options
// -----------------------------------------
// import default from '/js/aclass.js';
// import * from '/js/aclass.js';
// import '/js/aclass.js';
// import default from '/js/aclass';
// import AClass from '/js/aclass';
// import * from '/js/aclass';
// import { AClass } from '/js/aclass.js';
// const AClass = require('/js/aclass.js');
module.exports = {
data: function () {
return {
}
},
mounted: function(){
// console.log('ACLass', AClass);
},
destroyed: function(){
},
methods: {
},
}
</script>
and the class file looks like this:
class AClass {
constructor() {
return this
}
}
export AClass
or
export default class AClass {
constructor() {
return this
}
}
None of the options seem to work: all the options based on import
generate an error that says ReferenceError: "responseText is not defined"
and the ones based on require
one that says ÀClass is not defined` (when the console.log line is uncommented).
I have resorted to loading the class in the window
global in the Vue.js base app - but everyone says that's barbaric, and I would like to be able to delay the loading of the library (the real one is heavier, and somewhat rarely used).
I have checked the various answers such as this and this and this but it looks like the mere use of import
in the component makes things go wrong.
The component itself is loaded like this
var app = new Vue({
el: '#app',
router: (new VueRouter({
routes: [
{ path: '/view/grid/:md5', component: httpVueLoader('components/view/grid.vue'), name: 'grid_md5' },
]
})),
});
I am sure the solution must be there somewhere, but after about three hours of banging my head against this, I will throw myself at the mercy of the StackOverflow crowd.