Error when using vue js inside electron app

Question

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"}
        ]
    }
});

tony19 · Accepted Answer · 2022-07-15 21:11:12Z

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.

Collectives™ on Stack Overflow

Error when using vue js inside electron app

1 Answer 1

Edit 11/4/2016

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit 11/4/2016

Comments

Your Answer

Sign up or log in

Post as a guest

Related