Eel
Eel copied to clipboard
python-eel
How Eel work with Vue?
I like Eel,it help me out of annoying python gui work.Actually i'm using electron-vue as my GUI,that means i run a electron to interactive with user and run a python web frame(Flask now) to deal with tasks. I prefer write my web with Vue,But when i run python with eel,the built files(.vue) are not auto injected,So now i want to know whether Eel can work with Vue and how?
It work perfect, we develop all frontend in vue. The only tricky thing is that i add a line to the index.html
for working with vue in development.
here is an example: https://github.com/LarryGF/Lilipad_2.0
modification to index.html:
`
<!-- built files will be auto injected -->
@hiancdtrsnm Another question:How to pack these into one file?I use pyinstaller to pack however it can't run
In PyInstaller are an open issue for create onefile apps. I don't use --one-file
Vue can call methods exposed by python, but Python cannot call methods declared in vue. Is there a good way?
This seems to work me, I have not done extensive testing yet, please note I used the script tag along with a module directive to load a script file with the some Vue config meta, please note the use of v-cloak to hide bind tags {{}}:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Vue & Eel Test File</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<script async type="module">
console.log('IN: module: import main.js');
import {test as vc} from './script/main.js';
var app_1 = new Vue(vc);
app_1.$mount("#app");
</script>
<h1>Hello World!</h1>
<p>Vue intergration in to Eel testing</p>
<div v-cloak id='app'>{{message}}</div>
</body>
</html>
The main.js file looks like this:
//Main configuration file for vue.js
console.log('IN: main');
var vc = {};
vc.data = function() {
return {
title: "",
inputA: 0,
message: 'hello from vue and eel'
};
};
vc.methods = {
getInput: function(event) {
console.log("IN: methods: getInput");
console.dir(event);
this.title = event.target.value;
},
getResultMethod: function(){
console.log("IN: methods: getResultMethod");
}
};
vc.computed = {
getResultComputed: function(){
console.log("IN: computed:getResultComputed");
},
getResult4: function(){
console.log("IN: computed: getResult4");
}
};
vc.watch = {
inputA: function(){
console.log("IN: watch: inputA");
}
};
export {vc as test};
When I use eel.expose in my Vue code, it works on my dev server perfectly. However, when I build the app for production, the code is minified and the function names change, breaking the exposed functions. Is there a way to explicitly define the name of the functions that we expose?
Something like:
eel.expose('myFunctionName', function() {
...
});
Edit: I've looked at the source code and there is already a way to do this, but it's not documented. Check my pull request #272?
I've been using the methods above to open .vue from development mode and it works well. However, after I npm run build and open the deployment static HTML by Eel, it can run but there is a significant part of the website content missing.
I've tried to npx serve -s dist the static HTML, everything looks fine and it looks the same with the .vue from the development mode. Is there anyone who bumped into the same issue and knows how to solve it? Thanks!!!!
@ryannfinn I also had this problem, the solution I found was (if you are using vue-router) eel.start(''). Eel opens up a localhost web server so let router do its job and route for you :)
