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.

Image by M W from Pixabay

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.j*s 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();

Comments

[ben ajaero]

Thanks for sharing this tutorial! This combo looks like a really great option to create slick desktop apps