I am currently experimenting with ES6 modules and Vue.js, specifically single file components (SFC). To create my project, I utilized the Vue CLI with the webpack-simple template. I encountered an error that says "TypeError: Cannot read property 'name' of undefined" at the line where "settings.mainAlarm.name" is called. While running "npm run dev" does not generate any errors, I suspect that the build process is locating (and potentially disregarding) the settings.js file. What would be the most effective method for importing reusable JavaScript into a Vue SFC?
Root.vue file:
<template>
<div id="app">
<h1>{{ msg }}</h1>
<h4>{{ alarmName }}</h4>
</div>
</template>
<script>
//const settings = mainAlarm;
import settings from './lib/settings.js'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Blah Blah Blah!',
alarmName: settings.mainAlarm.name
}
}
}
//console.log(this.alarmName);
</script>
<style>
</style>
./lib/settings.js file:
export default function () {
var rtn = {
mainAlarm: {
name: "overdueCheckAlarm",
info: { delayInMinutes: .01, periodInMinutes: .25 }
},
notificationAudioFile: "ache.mp3",
baseUrl: "www.xxx.com/xx/xxxx-xxx/"
}
return rtn;
}