vuejspython 1.0.6

Vuejs runner, with filesystem, and allowing python extension (e.g., to leverage numpy)

If you're looking for "Vuejs-python that brings the concepts of vuejs to Python", see our V0 branch (and readme, and V0.* on pypi).

The goal of vuejs-python (starting from V1) is to

• easily run standalone Vue.js components / micro-apps,
• give them access to the working directory,
• allow (unsafe) extensions to be written in Python (including numpy, local resource access, etc)

Installation

pip install vuejspython

Usage

vjspy [--trust-python] [--port=...] [--host=...] myfile.vue more arbitrary parameters

You can run the bundled tools using their : prefixed names instead of the vue file. These files are in https://github.com/twitwi/vuejs-python/tree/main/vuejspython/builtin

Here are some example usage, that can be followed as a tutorial:

vjspy :create-demo-files demo
vjspy :view-file demo/file1.txt
vjspy :edit-file demo/file1.txt
vjspy --trust-python :rotate-files demo/file*.txt
vjspy :toggle-exam demo/exam/*

# hosting the current folder with a video player
vjspy :serve-videos

Snippets

HTML head

To add something in the HTML head (change title, icon, load library, etc):

<template>
    <add-in-head>
        <title>View File</title>
        <!-- an SVG icon emoji -->
        <link rel="icon" type="image/svg+xml"
        href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20style='filter:hue-rotate(60deg)'%20x='0'%20y='14'%3E👍%3C/text%3E%3C/svg%3E" />
    </add-in-head>
    ...
</template>

Accessing Vue

To import elements from the bundled Vue (you can remove lang="ts" to use plain js, and setup to use a traditional component writing):

<script setup lang="ts">
import { ref, computed } from "#vue"
...
</script>

Accessing files

To use the custom filesystem API (asynchronously):

<script...
const { fs } = window.VueRunner

const content = await fs.readFile('path/to/file')

await fs.writeFile('path/to/file', 'hello content')

await fs.deleteFile('path/to/file')

const allFilesRecursively = (await fs.listFiles()).files

It allows only access to files in the folder where the program has been started (Warning: with --trust-python, this limitation can be worked around easily).

Accessing command line parameters

<script...
const { args } = window.VueRunner
// NB: starts at index 0, no parameters ⇒ args==[]
alert(JSON.stringify(args))

Adding Python code

This requires the program to be launched with --trust-python. You can add python code in a script element and FastAPI:

<script...
alert(await((await fetch('/.path')).text()))
</script>

<script lang="python">
@app.get("/.path")
def get_path():
    import sys
    return sys.path
</script>

See also the rotate-files example that uses command line arguments (in python) too.

Handling url hash

<script...
const { onHash, setHash } = window.VueRunner

onHash((h) => {
    // also triggers on first load (with empty hash or the hash from the initial URL)
    if (h !== '') {
        alert('you changed the address to '+h)
    }
})

function showAbout() {
    ...
    setHash('about')
}