Vue and Electron - Single file components


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>

import Vue from 'vue';
import Test from './test';

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

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


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

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

import About from './About.vue'

export default {
components: {
          appAbout: About,
data () {
  return {
     text: 'Electron'

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.


Which is really strange because my component looks like this:

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

export default {

<style lang="css">

I am stuck. Can someone please help?