CODEWITHSUNDEEP
vue.jselectronelectron-forge
Borja Rojano
Borja Rojano

Reputation: 31

Nested single file components - vue.js with electron-forge

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.

error screenshot

It basically says that I am not using a single root element in my component, 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?

Upvotes: 2

Views: 780

Answers (2)

Sovalina
Sovalina

Reputation: 5609

Define your component like this :

  export default {
    components: {
      'app-about': About
    }
  }

Then use it in template like this (with kebab-case) :

<app-about></app-about>

About your compiling template error you need to wrap everything in test.vue in a root element :

<template>
  <div>
    <h2>Hello from {{text}}</h2>
    <app-about></app-about>
  </div>
</template>

Upvotes: 0

Borja Rojano
Borja Rojano

Reputation: 31

So I have tried a few different things with no success, like using or even as the component names.

I also have tried these two ways of starting the vue:

The way you get with electron-forge const app = new Vue(App).$mount('#app')

and the way I learned new Vue({el: '#app', render: h => h(App)})

Nothing seems to work...

Upvotes: 1

Related Questions