Single file components not rendering with Vuejs in Electron app

Question

I've been using the electron-webpack module to try to get a project running with vuejs . I started out with their quick-start repo to see if I could get it up and running.

I can see that my components are being loaded. They appear to being processed by babel. Vue even runs, and I can see the root component in the vue developer tool. But, when I try to use a single file component, in the ways I see other people using them, nothing renders.

index.vue (main file)

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: "#app",
  components: { App }
})

App.vue

<template>
  <div id="main">
    <h1>Main View</h1>
    <jester />
  </div>
</template>

<script>
  import Jester from './jester.vue'

  export default {
    name: 'app',
    components: { jester: Jester },
    data () {
      return {
      }
    }
}
</script>

jester.vue

<template>
  <p>This is the Jester component {{something}}</p>
</template>

<script>
export default {
  name: 'jester',
  data () {
    return {
      foo: 'bar'
    }
  }
}
</script>

I'm having trouble discerning why this would load a blank page. I'm using the recommended electron-webpack-vue which should load up vue-loader for webpack, and allow my components to be processed into javascript, and I believe that step is working, I checked to see if I could find translations of my modules in the renderer.js file included in the page source.

The complete code for the project is here: https://github.com/counterbeing/electron-webpack-quick-start

If you want to try running it you should be able to clone it, and just run yarn; yarn dev yarn; yarn dev

Answer 1

You forgot to add the template property in your renderer/index.js file.

just add:

new Vue({ el: "#app", template: '<App/>', components: { App } })

:)