Build an awesome python GUI: Vue3, Vite, and Eel
Tags: python, eel, vue, vite
Published: 2024-01-17 14:09:15


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](https://github.com/python-eel/Eel) 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](https://vuejs.org/), especially together with [Vite](https://vitejs.dev/).
The standard examples only showed a React.js example, and [smketterer VUE 2 example](https://github.com/smketterer/vue-eel-starter) is (after 5 years) a bit out of date.
> **Scroll to the bottom if you just want to update your current app.**

![Moray eel under water](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quneiocf6hoth8d3mlea.jpg)
Image by <a href="https://pixabay.com/users/efraimstochter-12351/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=95739">M W</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=95739">Pixabay</a>

## Start a new app

Copy this [repo](https://github.com/wagenrace/VUE3-VITE-eel-starter) and you are ready to start.

### Installation
```bash
    pip install eel
    cd web-src
    npm i
```
### Develop front-end

Run the VUE app developers mode.
```bash
    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.
```bash
    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.*
```bash
    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.
```bash
    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:
```html
    <script type=text/javascript src=/eel.js></script>
```
In *vite.config.js* add a build — outDir
```js
    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.

```js
    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();
```