vuejspython 0.2.7

Bridging vuejs and python (e.g., to leverage numpy)

Vuejs-python brings the concepts of vuejs to Python. You can write your model/data as a Python object and your HTML UI/view with the very convenient vuejs syntax. As soon as part of your model changes, all dependent variables are updated and the HTML UI is automatically refreshed.

The goal is to use not only Python the language but Python the platform (with numpy, system APIs, and other "native" things).

Installation

pip install vuejspython

Tiny Example

You need to create two files: one Python model and an HTML UI. A good convention (to help tools) is to use the same name, with the .py and .html extensions, respectively.

# example.py

    ...
    @model
    class App:
      radius = 5
      def computed_area(self):
        return pi * self.radius ** 2

    vuejspython.start(App())

# example.html

    <div id="main">
      Fill the radius in the text field: <input v-model.number="radius"/>.
      (or with <button @click="radius += 1">+1</button> <br/>
      A disk with radius {{ radius }} has an area of {{ area }}.
    </div>
     
    <script src="lib/vuejspython.js"></script>
    <script>vuejspython.start()</script>

Running, option 1: only with Python

python3 example.py

# or a tiny shell function helper
pvue() { (sleep .5;firefox ${1%.*}.html)& python3 ${1%.*}.py;}
pvue example.py

This will give you an address to which you should append your HTML file name, here example.html. In this example, you will visit http://localhost:4260/example.html (or visit the given address http://localhost:4260 and click your file).

NB: you need to stop the command with Ctrl+C if you want to run another example.

Running, option 2: with hot reload on file change

Here we will start two processes, one for the HTML part (with live reload, and another only for the Python).

Terminal 1, hosting the HTML files with hot reload:

# one-time install
pip install watchdog
npm install -g simple-hot-reload-server
# in terminal 1 (hot html reload, for all files)
hrs .

(this gives you the address to open, after appending your file name, e.g., http://localhost:8082/example.html)

Terminal 2, running the python server

# in terminal 2 (start or restart python)
NOSERVE=1 python3 example.py
# OR, for live restart
NOSERVE=1 watchmedo auto-restart --patterns="*.py" python3 example.py

NB: NOSERVE=1 tells vuejspython to not serve the HTML files (it is handled by hrs above)

NB: when changing the .py, a manual browser refresh is still needed, see below for a more complete solution

Helper for complete live reload (live restart for python)

pvue() { if test "$1" = open ; then shift ; (sleep 1 ; firefox "http://localhost:8082/${1%.*}.html") & fi; watchmedo auto-restart --patterns="*.py" --ignore-patterns="*/.#*.py" bash -- -c '(sleep .250 ; touch '"${1%.*}"'.html) & python3 '"${1%.*}"'.py' ; }
# Then
pvue example
# OR to also open firefox
pvue open example
# OR some convenient variations
NOSERVE=1 pvue open example
pvue open example.
pvue open example.py
pvue open example.html
# it always runs the file with the .py extension

Other, different projects

If you're interested only in using Python the language with Vue.js, you can try brython and the brython vue demo

There are projects that try to help integrating Vue.js with different Python web frameworks. The goal is different: Vuejs-python makes python and vue tightly integrated, in a common, reactive model.