CODEWITHSUNDEEP
electron
King Julien
King Julien

Reputation: 11298

Error when using vue js inside electron app

I'm trying to use vue.js inside electron app but getting the following error:

Uncaught Exception: ReferenceError: document is not defined at query (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:1070:10) at Vue._initProps (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7254:23) at Vue._initState (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7235:10) at Vue._init (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:2394:10) at new Vue (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:9000:8) at Object. (/Users/LM/Documents/mongoui/main.js:11:1) at Module._compile (module.js:425:26) at Object.Module._extensions..js (module.js:432:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12)

This is how I load vue.js inside main.js:

var Vue = require('vue');

new Vue({
    el: "#app",
    data: {
        collections: [
            {"name": "test 1"},
            {"name": "test 2"},
            {"name": "test 3"}
        ]
    }
});

Upvotes: 0

Views: 2113

Answers (1)

user3117575
user3117575

Reputation:

Given your error:

Uncaught Exception: ReferenceError: document is not defined at query

I would assume you're trying to use Vue inside of the Main Process, which unfortunately Vue wont be able to do without something like jsdom, since Vue depends on the document, and the main process doesn't have a document.

But, I assume the issue starts more fundamentally. You're probably wanting to use Vue from a Render Process, since that's where the document can be accessed.

Essentially, the main process in Electron is like the all-mighty controller, it is where you spawn and manage render processes. It doesn't reference to any singular DOM because no DOM exists in the main process. Instead, consider render processes, render processes are things like BrowserWindow, which can have a DOM.

So, with that information, we could try something like this:

main.js:

// import { app, BrowserWindow } from 'electron';
var electron = require('electron'),
    app = electron.app,
    BrowserWindow = electron.BrowserWindow;

app.on('ready', function() {
  var main = new BrowserWindow({ /* ... */ });
  main.loadURL('file://' + __dirname + '/index.html');
});

Then, from your render process:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script>
    var Vue = require('vue');

    new Vue({
        el: "#app",
        data: {
            collections: [
                {"name": "test 1"},
                {"name": "test 2"},
                {"name": "test 3"}
            ]
        }
    });
    </script>
  </head>
  <body id='app'>
    
  </body>
</html>

Of course you can reorganize the files however you want to, just remember to use Vue inside of the render process instead of the main process.

Edit 11/4/2016

Vue has server side rendering now too which you might want to look at.

Upvotes: 4

Related Questions