Py, Vue and eel
===============

How to develop application with these tools and how to use pyvueeel functions in such an app.

It's recommended way to download ``project-starter`` where all the files for gui are already edited and ready to use.
There are also working examples of calling from python to js and vice versa as well as example of alerting or plotting.

https://github.com/Malachov/pyvueeel/tree/master/content

If you want to build just what is necessary from scratch, you can use this tutorial.
Go in web documentation on readthedocs if reading from IDE


Structure
---------
::

    - myproject
        - gui
            - generated with Vue CLI
        - app.py

app.py
------
::

    import pyvueeel
    from pyvueeel import expose

    # Expose python functions to Js with decorator
    @expose
    def load_data(settings):
        return {'Hello': 1}
    if __name__ == '__main__':
        pyvueeel.run_gui()

You can return dict - will be object in js
You can return list - will be an array in js

**Call js function from Py**::

    pyvueeel.eel.load_data()

gui
---

Generate gui folder with Vue CLI

    npm install -g @vue/cli
    vue create gui

Goto folder and optionally::

    vue add vuex
    vue add vuetify
    vue add router

main.js
-------
::

    if (process.env.NODE_ENV == 'development') {

    try {
        window.eel.set_host("ws://localhost:8686");

    } catch (error) {
        document.getElementById('app').innerHTML = 'Py side is not running. Start app.py with debugger.'
        console.error(error);
    }

    Vue.config.productionTip = true
    Vue.config.devtools = true
    } else {
    Vue.config.productionTip = false
    Vue.config.devtools = false
    }

You can expose function to be callable from python. Import and then
window.eel.expose(function_name, 'function_name')

.env
----

Create empty files .env.development and add `VUE_APP_EEL=http://localhost:8686/eel.js`

Create empty .env.production and add `VUE_APP_EEL=eel.js`


index.html
----------

In public folder add to index.html::

    <script type="text/javascript" src="<%= VUE_APP_EEL %>"></script>

vue.config.js
-------------::

    let devtool_mode

    if (process.env.NODE_ENV === "development") {
      devtool_mode = "source-map";
    } else {
      devtool_mode = false;
    }

    module.exports = {
      outputDir: "web_builded",
      transpileDependencies: ["vuetify"],
      productionSourceMap: process.env.NODE_ENV != "production",

      configureWebpack: {
        devtool: devtool_mode,
      },
    };


Tips, tricks
------------

**VS Code plugins for developing**

- npm
- vetur
- Vue VSCode Snippets
- vuetify-vscode