vue html-tag not rendering in electron

Question

just trying to set up my first ever electron & vue.js app with webpack and running into the problem that my vue component is not getting rendered.

Here is my project structure

webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        {
            test: /\.vue$/,
            use: {
              loader: 'vue-loader'
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015'],
                plugins: ['transform-runtime']
              }
            }
        }
    ]
  },
  plugins: [
    new webpack.ExternalsPlugin('commonjs', [
      'electron'
  ])
  ]
}

main.js (electron entry point):

const electron = require('electron');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

var createWindow = () => {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

index.html (rendered by electron):

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <app></app>
  <script src="dist/bundle.js"></script>
</body>

</html>

app/App.vue (vue root component):

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
      return {
          msg: "root component"
      }
  }
}
</script>

app/main.js (webpack entry point):

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

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

I then run webpack to create the bundle.js which executes without any problems. But when i run npm run start (aka electron main.js) i get a blank screen and when I inspect the code it seems to be missing the app-tag:

resulting electron window

If I change 'el: "app"' to 'el: "body"' the whole body even is missing.

This is my first attempt to deal with this technologies and I have no idea what's wrong - any help?

HIGHphen HIGHphen · Accepted Answer · 2017-11-27T12:29:17

So I came up with the solution by myself. If in app/main.js I replace

components: { App }

with

render: h => h(App)

it works.

If someone knows why please let me know.

vue html-tag not rendering in electron

1 Answers