I've encountered an issue while using parcel-plugin-vue to compile a basic .vue component from a file. The compilation process seems to be running smoothly with no errors, but when I try to view the page in my browser, it appears blank without any content. Upon checking my main.js file, I noticed that the imported .vue component is undefined during runtime. Can someone help me understand why this is happening?
https://i.sstatic.net/knYxz.png
Here's a snippet of my main.js file:
import Vue from '../node_modules/vue/dist/vue';
import { Welcome } from './app/widgets/welcome/welcome.vue'; //this is undefined at runtime, but doesn't error
window.onload = startVue;
function startVue()
{
new Vue({
'el': '#app',
'template': Welcome,
'components': { Welcome }
});
}
And here is a glimpse of the welcome.vue file:
<template>
<div>
<h1>Welcome</h1>
</div>
</template>
<script>
export default
{
components: {}
}
</script>
<style>
</style>
Below is an excerpt from my package.json file:
{
"main": "index.js",
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.14.0",
"parcel-bundler": "^1.3.1",
"parcel-plugin-vue": "^1.4.0"
},
"dependencies": {
"vue": "^2.5.13",
"vue-material": "^1.0.0-beta-7",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}
To compile the project, I am using the command
./node_modules/.bin/parcel index.html