Build an awesome python GUI: Vue3, Vite, and Eel

When you are building a GUI in python, Tkinter and PyQt are popular options, but neither of them has the full freedom and power of JavaScript, HTML, and CSS.

This is where eel.py comes in, it gives you a full HTML GUI from which you can call python functions. This is very similar to electron where you call node.js functions.

To make the creation of the front-end project easier, most people use a js framework. I am a fan of VUE.js, especially together with Vite. The standard examples only showed a React.js example, and smketterer VUE 2 example is (after 5 years) a bit out of date.

Scroll to the bottom if you just want to update your current app.

Start a new app

Copy this repo and you are ready to start.

Installation

pip install eel
cd web-src
npm i

Develop front-end

Run the VUE app developers mode.

cd web-src
npm run dev

Within web-src\public\eel.js there is a mock-up eel implementation. This file will be overwritten when building. It holds 2 example functions hello_world and get_greeting. get_greeting also has the callback logic. These are just for testing so you can quickly develop the front-end like you would with every VUE app, without having to build or run eel app.

Build front-end

Running the build command will create a folder /web. This folder holds the build VUE app.

cd web-src
npm run build

Develop eel app

Eel can now be developed in the same way as normal. Run the app and start writing code. In order to make the python function available for the front end make sure you use the decorator @eel.expose.

python app.py

All the mock-up functions with eel.js are now overwritten by the eel app. If the eel exposed function in app.py is named the same, it will work directly.

Building the full app

This will build the front-end and then the app as one .exe file.

cd web-src
npm run build
cd ..
pip install pyinstaller
python -m eel app.py web - onefile

Within the folder /dist you now have the single file (like app.exe).

Update your current project

Within index.html add html:

<script type=text/javascript src=/eel.js></script>

In vite.config.js add a build — outDir

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: "../web",
  },
});

eel.js debugger [Optional]

Copy the public/eel.js into your public folder. This script creates a mock-up eel so you can test your VUE app without building or running the eel app.

class Eel {
    /*
    This is for testing online.
    Here are placeholders of the eel functions
    so that the front-end can be tested with 'npm run dev'
    */
    hello_world() {
    console.log("Hello from eel placeholder");
  }
  get_greeting(string) {
    /*
    This function has a callback.
    If you call eel.get_greeting('world')(updateGreeting)
    The updateGreeting will be called with the result of eel.get_greeting
    */
    const greeting = `Hello ${string} (js)`;
    return (func) => func(greeting);
  }
}
const eel = new Eel();