Eel: Vue.js with Eel

[datainvestor]

Describe the problem
I'm trying to create an app using Vue.js as fronted with Eel.
However after following some other issues here on github I'm stuck with the following error:
error 'eel' is not defined no-undef

I put the Eel.js as src in my index.html file:

<script type='text/javascript' src='http://localhost:8080/eel.js'></script>

Here is main.py eel file:

import eel
import threading
import sampling
from subprocess import call
from time import sleep


def start_web():
    call(['./start.sh'])


def start_eel():
    sleep(7)
    eel.init('VueApp', allowed_extensions=['.js', '.html', '.vue'])
    eel.start('', options={
        'port': 8080,
        'host': 'localhost',
    })


if __name__ == '__main__':
    t1 = threading.Thread(target=start_web)
    t2 = threading.Thread(target=start_eel)
    t1.start()
    t2.start()

So Im running the app in dev mode, as sugested in another issue here.

Here is my start.sh file:

cd VueApp
npm run dev

The thing is I'm stuck what else I should do.
Is there a place I should somehow import Eel into Vue that I'm missing?
My Vue app is running on port 8686 because if I set it to run on same port I get OSError in eel, not sure if that is correct.

I think you guys managed to get this work, could you please share what should I do to make Vue recognize eel? @hiancdtrsnm @alexwohlbruck @ahopkins

[hiancdtrsnm]

If you want to look for an example I suggest this one https://github.com/LarryGF/Lilipad_2.0. A project using eel and Vuejs.

[hiancdtrsnm]

My way of work in debugging is to start eel and Vuejs in independent servers. You must add this line in index.html of Vuejs project.

https://github.com/LarryGF/Lilipad_2.0/blob/16b33785efb718b1d31aebe3118847c7ec155c6d/vue/index.html#L8

and the eel server needs no changes

[hiancdtrsnm]

For production, you most generate Vuejs as static files and if you put it in a separated folder, do like this https://github.com/LarryGF/Lilipad_2.0/blob/16b33785efb718b1d31aebe3118847c7ec155c6d/run.py#L7

[datainvestor]

@hiancdtrsnm I added this eel_host script line to index.html but it does not seem to work as well. Still somehow my Vue app is not recognizing eel function.

[hiancdtrsnm]

show me the error message

[alexwohlbruck]

I managed to solve this by including the a script tag in my public/index.html, pointing to localhost:8686/eel.js. Then specify the same port for Eel to host the js file at in your python code. You can test your Vue dev server and the Vue file will load in as long as an Eel window is open at the same time.

[datainvestor]

@alexwohlbruck so the both Vue app and eel should be on the same port- 8686? Beucase as you can see above im poinitng eel to 8080 but i changed in my vue config to open at 8686. So they are at different ports right now.

[datainvestor]

@hiancdtrsnm This is the error Im getting:

Failed to compile.

./src/pages/Sampling/Sampling.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

../src/pages/Sampling/Sampling.vue
  173:7  error  'eel' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

[alexwohlbruck]

The selected port doesnt matter, as long as they are the same. I try to keep it on something relatively unique in case another local server is running on that port.

Also, forgot to mention. To use the eel object in js, I just referenced window.eel and it works just fine. I cannot find any way to import it with an es6 import statement.

You can reference the code in my project.

[datainvestor]

@alexwohlbruck This helped, im not getting error anymore thanks a lot! One more thing, how can I debug python code this way? Because when I run python main.py I get terminal for the Vue app but no feedback for python at all (no prints, no error so far it seems).

[alexwohlbruck]

What I have been doing is running the python eel app in one terminal and debugging my python with that, and running the vue dev server in another terminal and debug that in the browser. If you need to test your python code with some new vue code, you just have to build the vue app again, i know its not the most convenient but it has sufficed.

[alexwohlbruck]

@datainvestor Have you got it working?

[datainvestor]

@alexwohlbruck Yeah it started working after a while. Had eel and vue js on separate ports and used window.eel to call eel functions.

[luciferamji]

@alexwohlbruck Yeah it started working after a while. Had eel and vue js on separate ports and used window.eel to call eel functions.

hi can you tell how did you make that work .I cant use my python functions once i build and app starts

error in console
vue.runtime.esm.js:1888 TypeError: window.eel.hello_world is not a function
at a.mounted (HelloWorld.vue:17)
at ne (vue.runtime.esm.js:1854)
at Rn (vue.runtime.esm.js:4219)
at Object.insert (vue.runtime.esm.js:3139)
at E (vue.runtime.esm.js:6346)
at Or.__patch__ (vue.runtime.esm.js:6565)
at Or.Pn.t._update (vue.runtime.esm.js:3945)
at Or.r (vue.runtime.esm.js:4066)
at nr.get (vue.runtime.esm.js:4479)
at new nr (vue.runtime.esm.js:4468)
oe @ vue.runtime.esm.js:1888

template

template>

{{ this.message }}

"sasjla"

Python file
import eel

eel.init('web') # or the name of your directory
eel.start('index.html', size=(600, 400))

@eel.expose
def hello_world():
return "Hello from python"

[alexwohlbruck]

@abelandcain Have you made sure to include the eel.js in your html? Take a look at my code.

[luciferamji]

yeah @alexwohlbruck i forgot to mention the port numberin index.html i checked .
Your code really helped.