Vue and Electron - Single file components


#1

Dear community,

I am trying electron for the first time and I am blown away by it. I have hit a wall, though, when trying to use single file vue.js components using electron-forge. My problem is the following:

I create a project using the vue.js template and run it. Works and looks great. I have a single file page with an index file that looks like this:

  <div id="test"></div>
</body>

<script>
import Vue from 'vue';
import Test from './test';

const app = new Vue(Test).$mount('#test');

app.text = "Electron Forge with Vue.js!";

</script>```

So far, so good. It imports Test, which is a single file component and renders it.

Now, I would like to have other single file components nested in this main component. For example, I would like to have the following, in my app file called test.vue

```<template>
<h2>Hello from {{text}}</h2>
</template>

<script>
import About from './About.vue'

export default {
components: {
          appAbout: About,
      },
data () {
  return {
     text: 'Electron'
  }
}
}
</script>```

Again, so far so good. I can run the app with no errors so the component is being imported. 

Here comes my problem: if I now try to render the component using `<appAbout></appAbout>`, as I have done before in web apps with vue.js, I get the following error.

![44|435x414](upload://jTbQRfwXzYTAsSnA9En9T1mn8Hc.png)


Which is really strange because my component looks like this:

```<template lang="html">
<div>Hello from component</div>
</template>

<script>
export default {
}
</script>

<style lang="css">
</style>```

I am stuck. Can someone please help?