Vue starter project for Eel

This is a basic Vue starter project to introduce people to Eel. I have used Eel for a couple projects already, and have found it great to work with. Hopefully this will help new users get started with this fantastic library.

Get started

Starting from scratch

pip3 install eel
touch app.py

This guide uses Eel 0.9.10. It may be necessary to use this specific version for later steps.

Vue setup (using vue-cli):

vue create vue

This will do a decent amount of the frontend build for you. I will typically manually select the options, using Babel, CSS Pre-processors (SCSS), Store and the Router.

Vue has its own way of interfacing with webpack. So we need to create a vue.config.js file inside of our vue directory with a specified output route, outside of the frontend directory. Run the following:

cd vue
touch vue.config.js

Inside vue.config.js add the following:

const path = require('path');
module.exports = {
  outputDir: "../web" // or whatever you would like your output directory to be, which will be used in the next step.
}

Navigate to vue/public and add the following to index.html in the head tag:

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

Run npm run build.

Then in app.py type:

import eel

eel.init('web') # or the name of your directory
eel.start('index.html', size=(600, 400))

This will run the default vue app. All that's left is to demonstrate how to run python functions via javascript and return values.

In app.py type:

@eel.expose
def hello_world():
    return "Hello from python"

In the default HelloWorld.vue component that is created, replace the code with the following:

<template>
  <div class="hello">
    <p>{{ this.message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: function() {
    return {
      message: ""
    }
  },
  mounted: function() {
    eel.hello_world()((val) => {
      this.message = val
    })
  }
}
</script>

This file demonstrates how to asynchronously call Python functions from within a Vue component. You should be able to rebuild the frontend now and see the string returned from the Python function.

Let's add another function, for reading data from javascript. In app.py let's add, after the hello_world function:

@eel.expose
def print_string(string):
    if len(string) > 20:
        print(string)
        return "Success!"
    else:
        return "Please type more than 20 characters."

In our HelloWorld.vue component, let's add a new method to the component object.

First let's add to the template:

<input type="text" v-model="inputValue" />
<button @click="onClick">Send</button>
<div>
  {{ response }}
</div>

At the same time, replace the properties returned by the data object:

message: "",
inputValue: "",
response: ""

Add the following to the object after the mounted property:

methods: {
  onClick() {
    // Passing string to Python.
    eel.print_string(this.inputValue)((val) => {
      // Return response from Python.
      this.response = val
    })
  }
}

If you rebuild the frontend, you should now see an input and a button. You should be able to input characters and have them validated.

It's possible to expose JS functions that are called by Python. This seems to be somewhat brittle in my experience. In many cases you can get away with only using return values. For advanced usage, please check out the Eel repository and issues section.

Notes on my setup

I have glossed over a additional configuration steps for the sake of brevity.

• Moving asset directories, importing SASS in App.vue.
• In main.js, set Vue.config.devtools = true for debugging.
• Removing favicons, as they're unused in Chrome app mode.

Common problems

• You will need to make sure caching is disabled. Do this via dev tools > network, and check 'Disable Cache'. Otherwise your JS changes will not be reflected, and when working on multiple apps, you might get the cached JS and CSS.

Starter project ideas

• Simple todo app with file storage
• Simple API explorer with requests
• Simple data explorer