Search code examples
javascriptvue.jsbabeljsparceljs

Why is my .vue component undefined?

I'm using parcel-plugin-vue to compile the simplest possible .vue component from a file.

Compilation runs, no errors, but a blank page displays with no writing in my browser. I can see in my main.js file that the import .vue component is undefined at run time. Why is this please?

IDE

main.js

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 }
    });
}

welcome.vue

<template>
    <div>
        <h1>Welcome</h1>
    </div>
</template>

<script>
    export default 
    {
        components: {}
    }
</script>

<style>
</style>

package.json

{ 
  "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 I'm running ./node_modules/.bin/parcel index.html

Solution

  • There's no export named Welcome in your Welcome.vue component, so you can't import it using curly brace syntax. The import should work without curly braces:

    import Welcome from './app/widgets/welcome/welcome.vue';