This procedure explains how to install an environnement to use Vue.js via Vite with eel. It allows both to use the hot reload feature of Vite and to build the project for production. It has only been tested to call a Python function from a Vue component and not the opposite.
It has been tested on Linux Mint 22 (based on Ubuntu 24.04).
Install eel (tested version: 0.18.1):
pip install eelCreate the vite template (tested version: 6.1.1):
npm create vite@latestLet the default project name: vite-project.
Select Vue as the framework.
Select JavaScript as the variant.
Install the node modules:
cd vite-project
npm installIn vite-project/index.html, add the following line within the <head> tag:
<script type="text/javascript" src="/eel.js"></script>In vite-project/vite.config.js, replace the export default defineConfig […] call by the following (command === 'serve' makes it only applied for the development mode):
export default defineConfig(({ command }) => ({
plugins: [vue()],
...(command === 'serve' && {
server: {
proxy: {
'/eel': {
target: 'http://localhost:8000', // "host" and "port_eel" in __main__.py
ws: true
}
}
}
})
}))In vite-project/src/components/HelloWorld.vue, add the following line within the <script setup> tag:
const eel = window.eelStill in vite-project/src/components/HelloWorld.vue, add the following line within the <template> tag:
<button @click="eel.hello()">Call Python</button>Try to run the program in production mode with the following command:
python __main__.pyClick on the button Call Python and check that the terminal displays Hello !.
Try to run the program in development mode with the following command (it can takes up to about 10 seconds to open the eel window):
python __main__.py --mode=devClick on the button Call Python and check that the terminal displays Hello !.
In the file vite-project/src/components/HelloWorld.vue, modify something within the <template> tag and check that the changes are applied in the eel window without having to restart the program.
- Call a JavaScript function from Python.
- Speed up the opening of the eel window in development mode.